From 1581cbd3b61bf2b75093f731bf14705017f64ab5 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 26 Feb 2025 09:28:56 +0100
Subject: [PATCH 01/10] wip

---
 .../layout/mt-grid/mt-grid.stories.ts         | 26 ++++++++++++++++++
 .../src/components/layout/mt-grid/mt-grid.vue | 27 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
 create mode 100644 packages/component-library/src/components/layout/mt-grid/mt-grid.vue

diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
new file mode 100644
index 000000000..de8b13f7c
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import MtGrid from "./mt-grid.vue";
+import type { SlottedMeta } from "@/_internal/story-helper";
+import MtTextField from "@/components/form/mt-text-field/mt-text-field.vue";
+
+type MtGridMeta = SlottedMeta<typeof MtGrid, "default">;
+
+export default {
+  title: "Components/Layout/MtGrid",
+  component: MtGrid,
+  render(args) {
+    return {
+      setup: () => ({ args }),
+      components: { MtGrid, MtTextField },
+      template: `
+<mt-grid v-bind="args">
+  <MtTextField label="Item 1" />
+  <MtTextField label="Item 1" />
+  <MtTextField label="Item 1" />
+  <MtTextField label="Item 1" />
+</mt-grid>`,
+    };
+  },
+} satisfies MtGridMeta;
+
+export const Default: StoryObj<MtGridMeta> = {};
diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.vue b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
new file mode 100644
index 000000000..cda79f772
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="mt-grid">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineSlots } from "vue";
+
+defineProps<{
+  columns: number;
+}>();
+
+defineSlots<{
+  default(): any;
+}>();
+</script>
+
+<style>
+.mt-grid {
+  --_mt-grid-gap: 32px;
+
+  gap: var(--_mt-grid-gap);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(max(calc(33% - 32px), 300px), 1fr));
+}
+</style>

From 838a4812dc96e69f8bc8861418990c0f814bf56b Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 26 Feb 2025 09:31:13 +0100
Subject: [PATCH 02/10] refactor(component-library): add variable for grid gap

---
 .../component-library/src/components/layout/mt-grid/mt-grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.vue b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
index cda79f772..91376a834 100644
--- a/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
@@ -22,6 +22,6 @@ defineSlots<{
 
   gap: var(--_mt-grid-gap);
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(max(calc(33% - 32px), 300px), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(max(calc(33% - var(--_mt-grid-gap)), 300px), 1fr));
 }
 </style>

From 32fd598651c704c6b932fa4a0cecf000fa35f532 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 26 Feb 2025 09:45:58 +0100
Subject: [PATCH 03/10] wip

---
 .../layout/mt-grid/mt-grid.stories.ts         | 24 ++++++++++++-------
 .../src/components/layout/mt-grid/mt-grid.vue |  8 +++++--
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
index de8b13f7c..096f740c8 100644
--- a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/vue3";
 import MtGrid from "./mt-grid.vue";
 import type { SlottedMeta } from "@/_internal/story-helper";
 import MtTextField from "@/components/form/mt-text-field/mt-text-field.vue";
+import MtCard from "../mt-card/mt-card.vue";
 
 type MtGridMeta = SlottedMeta<typeof MtGrid, "default">;
 
@@ -11,16 +12,23 @@ export default {
   render(args) {
     return {
       setup: () => ({ args }),
-      components: { MtGrid, MtTextField },
+      components: { MtGrid, MtTextField, MtCard },
       template: `
-<mt-grid v-bind="args">
-  <MtTextField label="Item 1" />
-  <MtTextField label="Item 1" />
-  <MtTextField label="Item 1" />
-  <MtTextField label="Item 1" />
-</mt-grid>`,
+<mt-card title="Grid inside a card">
+  <mt-grid v-bind="args">
+    <MtTextField label="Item 1" />
+    <MtTextField label="Item 1" />
+    <MtTextField label="Item 1" />
+    <MtTextField label="Item 1" />
+  </mt-grid>
+</mt-card>
+`,
     };
   },
 } satisfies MtGridMeta;
 
-export const Default: StoryObj<MtGridMeta> = {};
+export const Default: StoryObj<MtGridMeta> = {
+  args: {
+    columns: 3,
+  },
+};
diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.vue b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
index 91376a834..3bf2c0a07 100644
--- a/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-grid">
+  <div class="mt-grid" :style="{ '--_mt-grid-columns': `calc(100% / ${columns})` }">
     <slot />
   </div>
 </template>
@@ -19,9 +19,13 @@ defineSlots<{
 <style>
 .mt-grid {
   --_mt-grid-gap: 32px;
+  --_mt-grid-columns-without-gap: calc(var(--_mt-grid-columns) - var(--_mt-grid-gap));
 
   gap: var(--_mt-grid-gap);
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(max(calc(33% - var(--_mt-grid-gap)), 300px), 1fr));
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(var(--_mt-grid-columns-without-gap), 200px), 1fr)
+  );
 }
 </style>

From 94b699c1c5f0d9b8a31cec0977bb6519a2dda232 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 26 Feb 2025 10:11:29 +0100
Subject: [PATCH 04/10] chore: add future flag component

---
 .../components/theme/mt-future-flag.spec.ts   | 51 +++++++++++++++++++
 .../src/components/theme/mt-future-flag.vue   | 25 +++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 packages/component-library/src/components/theme/mt-future-flag.spec.ts
 create mode 100644 packages/component-library/src/components/theme/mt-future-flag.vue

diff --git a/packages/component-library/src/components/theme/mt-future-flag.spec.ts b/packages/component-library/src/components/theme/mt-future-flag.spec.ts
new file mode 100644
index 000000000..5e1f1e791
--- /dev/null
+++ b/packages/component-library/src/components/theme/mt-future-flag.spec.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/vue";
+import MtFutureFlag from "./mt-future-flag.vue";
+import { defineComponent } from "vue";
+import { useFutureFlags } from "@/composables/useFutureFlags";
+
+describe("mt-future-flag", () => {
+  it("can enable a future flag", () => {
+    // ARRANGE
+    const Child = defineComponent({
+      template: "<div>No default margin: {{futureFlags.removeDefaultMargin.toString()}}</div>",
+      setup() {
+        const futureFlags = useFutureFlags();
+
+        return { futureFlags };
+      },
+    });
+
+    const Component = defineComponent({
+      components: { MtFutureFlag, Child },
+      template: "<mt-future-flag remove-default-margin><Child /></mt-future-flag>",
+    });
+
+    render(Component);
+
+    // ASSERT
+    expect(screen.getByText("No default margin: true")).toBeVisible();
+  });
+
+  it("future flag is disabled by default", () => {
+    // ARRANGE
+    const Child = defineComponent({
+      template: "<div>No default margin: {{futureFlags.removeDefaultMargin.toString()}}</div>",
+      setup() {
+        const futureFlags = useFutureFlags();
+
+        return { futureFlags };
+      },
+    });
+
+    const Component = defineComponent({
+      components: { MtFutureFlag, Child },
+      template: "<mt-future-flag><Child /></mt-future-flag>",
+    });
+
+    render(Component);
+
+    // ASSERT
+    expect(screen.getByText("No default margin: false")).toBeVisible();
+  });
+});
diff --git a/packages/component-library/src/components/theme/mt-future-flag.vue b/packages/component-library/src/components/theme/mt-future-flag.vue
new file mode 100644
index 000000000..eed74ac9e
--- /dev/null
+++ b/packages/component-library/src/components/theme/mt-future-flag.vue
@@ -0,0 +1,25 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { provideFutureFlags } from "../../composables/useFutureFlags";
+
+const props = withDefaults(
+  defineProps<{
+    removeDefaultMargin?: boolean;
+  }>(),
+  {
+    removeDefaultMargin: false,
+  },
+);
+
+defineSlots<{
+  default(): any;
+}>();
+
+provideFutureFlags({
+  removeDefaultMargin: props.removeDefaultMargin,
+  removeCardWidth: false,
+});
+</script>

From f12a61f535521430eda5f78281edf75255e35284 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 26 Feb 2025 11:00:49 +0100
Subject: [PATCH 05/10] test(component-library): use remove default margins in
 mt-grid stories

---
 .../layout/mt-grid/mt-grid.stories.ts         | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
index 096f740c8..84ec2c5be 100644
--- a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
@@ -3,6 +3,7 @@ import MtGrid from "./mt-grid.vue";
 import type { SlottedMeta } from "@/_internal/story-helper";
 import MtTextField from "@/components/form/mt-text-field/mt-text-field.vue";
 import MtCard from "../mt-card/mt-card.vue";
+import MtFutureFlag from "@/components/theme/mt-future-flag.vue";
 
 type MtGridMeta = SlottedMeta<typeof MtGrid, "default">;
 
@@ -12,16 +13,18 @@ export default {
   render(args) {
     return {
       setup: () => ({ args }),
-      components: { MtGrid, MtTextField, MtCard },
+      components: { MtGrid, MtTextField, MtCard, MtFutureFlag },
       template: `
-<mt-card title="Grid inside a card">
-  <mt-grid v-bind="args">
-    <MtTextField label="Item 1" />
-    <MtTextField label="Item 1" />
-    <MtTextField label="Item 1" />
-    <MtTextField label="Item 1" />
-  </mt-grid>
-</mt-card>
+<mt-future-flag remove-default-margin>
+  <mt-card title="Grid inside a card">
+    <mt-grid v-bind="args">
+      <MtTextField label="Item 1" />
+      <MtTextField label="Item 1" />
+      <MtTextField label="Item 1" />
+      <MtTextField label="Item 1" />
+    </mt-grid>
+  </mt-card>
+</mt-future-flag>
 `,
     };
   },

From ddfc58a4558fd3cda30dcd13e9065757ebaae448 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 26 Feb 2025 11:36:35 +0100
Subject: [PATCH 06/10] wip

---
 .../src/components/form/mt-switch/mt-switch.vue     |  1 +
 .../components/layout/mt-grid/mt-grid.stories.ts    | 13 ++++++++-----
 .../src/components/layout/mt-grid/mt-grid.vue       |  1 +
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/component-library/src/components/form/mt-switch/mt-switch.vue b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
index 091b32f45..9b2441707 100644
--- a/packages/component-library/src/components/form/mt-switch/mt-switch.vue
+++ b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
@@ -105,6 +105,7 @@ defineEmits<{
 
 .mt-switch--not-bordered {
   min-height: var(--scale-size-48);
+  display: flex;
 }
 
 .mt-switch--no-top-margin {
diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
index 84ec2c5be..94ad69c31 100644
--- a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
@@ -4,6 +4,7 @@ import type { SlottedMeta } from "@/_internal/story-helper";
 import MtTextField from "@/components/form/mt-text-field/mt-text-field.vue";
 import MtCard from "../mt-card/mt-card.vue";
 import MtFutureFlag from "@/components/theme/mt-future-flag.vue";
+import MtSwitch from "@/components/form/mt-switch/mt-switch.vue";
 
 type MtGridMeta = SlottedMeta<typeof MtGrid, "default">;
 
@@ -13,15 +14,17 @@ export default {
   render(args) {
     return {
       setup: () => ({ args }),
-      components: { MtGrid, MtTextField, MtCard, MtFutureFlag },
+      components: { MtGrid, MtTextField, MtCard, MtFutureFlag, MtSwitch },
       template: `
 <mt-future-flag remove-default-margin>
   <mt-card title="Grid inside a card">
     <mt-grid v-bind="args">
-      <MtTextField label="Item 1" />
-      <MtTextField label="Item 1" />
-      <MtTextField label="Item 1" />
-      <MtTextField label="Item 1" />
+      <MtTextField label="Delivery time" />
+      <MtTextField label="Restock time in days" />
+      <MtSwitch label="Free shipping" />
+      <MtTextField label="Min. order quantity" />
+      <MtTextField label="Purchase steps" />
+      <MtTextField label="Max. order quantity" />
     </mt-grid>
   </mt-card>
 </mt-future-flag>
diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.vue b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
index 3bf2c0a07..1099281a1 100644
--- a/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.vue
@@ -22,6 +22,7 @@ defineSlots<{
   --_mt-grid-columns-without-gap: calc(var(--_mt-grid-columns) - var(--_mt-grid-gap));
 
   gap: var(--_mt-grid-gap);
+  align-items: end;
   display: grid;
   grid-template-columns: repeat(
     auto-fit,

From f8b86941abb1346faeb71ae4361e1e9c2b71de67 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 26 Feb 2025 14:25:45 +0100
Subject: [PATCH 07/10] chore: export grid and future flag component

---
 packages/component-library/src/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/component-library/src/index.ts b/packages/component-library/src/index.ts
index f4956d4b2..cfbfee240 100644
--- a/packages/component-library/src/index.ts
+++ b/packages/component-library/src/index.ts
@@ -41,6 +41,8 @@ import MtTextEditor from "./components/form/mt-text-editor/mt-text-editor.vue";
 import MtTextEditorToolbarButton from "./components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button.vue";
 import MtSearch from "./components/navigation/mt-search/mt-search.vue";
 import MtUrlField from "./components/form/mt-url-field/mt-url-field.vue";
+import MtFutureFlag from "./components/theme/mt-future-flag.vue";
+import MtGrid from "./components/layout/mt-grid/mt-grid.vue";
 
 // Import SCSS for styling
 import "./components/assets/scss/all.scss";
@@ -93,6 +95,8 @@ export {
   MtSearch,
   MtUrlField,
   MtThemeProvider,
+  MtFutureFlag,
+  MtGrid,
   TooltipDirective,
   DeviceHelperPlugin,
   // @deprecated

From 84414d276e24c0d93f82e0deda21855747665034 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 27 Feb 2025 08:47:10 +0100
Subject: [PATCH 08/10] feat(component-library): add mt-vertical-stack
 component

---
 .changeset/tasty-boats-turn.md                |  5 +++
 .../mt-vertical-stack/mt-stack.stories.ts     | 33 +++++++++++++++++++
 .../mt-vertical-stack/mt-vertical-stack.vue   | 28 ++++++++++++++++
 packages/component-library/src/index.ts       |  2 ++
 4 files changed, 68 insertions(+)
 create mode 100644 .changeset/tasty-boats-turn.md
 create mode 100644 packages/component-library/src/components/layout/mt-vertical-stack/mt-stack.stories.ts
 create mode 100644 packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.vue

diff --git a/.changeset/tasty-boats-turn.md b/.changeset/tasty-boats-turn.md
new file mode 100644
index 000000000..9092ac05a
--- /dev/null
+++ b/.changeset/tasty-boats-turn.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": minor
+---
+
+Add mt-vertical-stack component
diff --git a/packages/component-library/src/components/layout/mt-vertical-stack/mt-stack.stories.ts b/packages/component-library/src/components/layout/mt-vertical-stack/mt-stack.stories.ts
new file mode 100644
index 000000000..6be3afaac
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-vertical-stack/mt-stack.stories.ts
@@ -0,0 +1,33 @@
+import type { SlottedMeta } from "@/_internal/story-helper";
+import type { StoryObj } from "@storybook/vue3";
+import MtVerticalStack from "./mt-vertical-stack.vue";
+
+type MtStackMeta = SlottedMeta<typeof MtVerticalStack, "default">;
+
+export default {
+  title: "Components/Layout/mt-vertical-stack",
+  component: MtVerticalStack,
+  render(args) {
+    return {
+      setup: () => ({ args }),
+      components: { MtVerticalStack },
+      template: `
+<mt-vertical-stack v-bind="args">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+</mt-vertical-stack>`,
+    };
+  },
+  args: {
+    size: "32px",
+  },
+} satisfies MtStackMeta;
+
+export const Default: StoryObj<typeof MtVerticalStack> = {};
+
+export const WithToken: StoryObj<typeof MtVerticalStack> = {
+  args: {
+    size: "scale-size-24",
+  },
+};
diff --git a/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.vue b/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.vue
new file mode 100644
index 000000000..1d7d49d5c
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="mt-stack" :style="{ gap }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  size: string;
+}>();
+
+const gap = computed(() => {
+  if (props.size.startsWith("scale-size-")) {
+    return `var(--${props.size})`;
+  }
+
+  return props.size;
+});
+</script>
+
+<style scoped>
+.mt-stack {
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/packages/component-library/src/index.ts b/packages/component-library/src/index.ts
index cfbfee240..6cede892f 100644
--- a/packages/component-library/src/index.ts
+++ b/packages/component-library/src/index.ts
@@ -43,6 +43,7 @@ import MtSearch from "./components/navigation/mt-search/mt-search.vue";
 import MtUrlField from "./components/form/mt-url-field/mt-url-field.vue";
 import MtFutureFlag from "./components/theme/mt-future-flag.vue";
 import MtGrid from "./components/layout/mt-grid/mt-grid.vue";
+import MtVerticalStack from "./components/layout/mt-vertical-stack/mt-vertical-stack.vue";
 
 // Import SCSS for styling
 import "./components/assets/scss/all.scss";
@@ -97,6 +98,7 @@ export {
   MtThemeProvider,
   MtFutureFlag,
   MtGrid,
+  MtVerticalStack,
   TooltipDirective,
   DeviceHelperPlugin,
   // @deprecated

From 46b1bdb66ef04b238249f17c64ffc7d3a9330a84 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 27 Feb 2025 09:06:06 +0100
Subject: [PATCH 09/10] docs(component-library): add documentation for the
 mt-vertical-stack

---
 .../mt-vertical-stack/mt-vertical-stack.mdx   | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.mdx

diff --git a/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.mdx b/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.mdx
new file mode 100644
index 000000000..a835942b1
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-vertical-stack/mt-vertical-stack.mdx
@@ -0,0 +1,39 @@
+# Vertical Stack
+
+The `mt-vertical-stack` component can be used to align and add spacing
+between elements. Common use cases are adding multiple cards below each other
+or adding multiple rows of input fields.
+
+## Usage
+
+```vue
+<template>
+  <mt-vertical-stack>
+    <mt-card><!-- Your card content --></mt-card>
+    <mt-card><!-- Your card content --></mt-card>
+    <mt-card><!-- Your card content --></mt-card>
+  </mt-vertical-stack>
+</template>
+
+<script setup>
+import { MtVerticalStack } from "@shopware-ag/meteor-component-library";
+</script>
+```
+
+## Controlling the spacing
+
+To control the spacing between the elements, you can use the `size`
+property.
+
+To control the spacing you need to use a spacing tokens.
+The always start with `scale-size-` followed by a number. You can see
+a list of all available tokens in the [spacing documentation](https://github.com/shopware/meteor/blob/main/packages/tokens/deliverables/foundation/primitives.css#L149).
+
+```vue
+<template>
+  <mt-vertical-stack size="scale-size-4">
+    <div>Element 1</div>
+    <div>Element 2</div>
+  </mt-vertical-stack>
+</template>
+```

From 11f87e2b76b91070f346eb92d9417c905638ffd1 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 27 Feb 2025 09:27:45 +0100
Subject: [PATCH 10/10] docs(component-libray): add instructions for mt-grid
 component

---
 .../src/components/layout/mt-grid/mt-grid.mdx | 39 +++++++++++++++++++
 .../layout/mt-grid/mt-grid.stories.ts         |  4 +-
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 packages/component-library/src/components/layout/mt-grid/mt-grid.mdx

diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.mdx b/packages/component-library/src/components/layout/mt-grid/mt-grid.mdx
new file mode 100644
index 000000000..750745c18
--- /dev/null
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.mdx
@@ -0,0 +1,39 @@
+import { Primary, Meta } from "@storybook/blocks";
+import * as MtGrid from "./mt-grid.stories.ts";
+
+<Meta of={MtGrid} />
+
+# Grid
+
+> **Note:** The `mt-grid` is completely different from the old `sw-grid`.
+> If you're looking for a replacement for the `sw-grid` take a look at the
+> `mt-data-table` component.
+
+---
+
+The `mt-grid-component` can be used to create simple grid layouts. The most
+common use case for this component is to use it inside a `mt-card`.
+
+For more complex layouts you should create grids with CSS.
+
+## Usage
+
+```vue
+<template>
+  <mt-card>
+    <mt-grid :columns="3">
+      <mt-text-field />
+      <mt-text-field />
+      <mt-switch />
+      <mt-text-field />
+      <mt-text-field />
+      <mt-text-field />
+    </mt-grid>
+  </mt-card>
+</template>
+```
+
+<Primary />
+
+> **Note:** The `mt-grid` component is responsive by default. You don't need
+> to care about adding media or container queries to make it responsive
diff --git a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
index 94ad69c31..d0cbebb57 100644
--- a/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
+++ b/packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { StoryObj } from "@storybook/vue3";
 import MtGrid from "./mt-grid.vue";
 import type { SlottedMeta } from "@/_internal/story-helper";
 import MtTextField from "@/components/form/mt-text-field/mt-text-field.vue";
@@ -9,7 +9,7 @@ import MtSwitch from "@/components/form/mt-switch/mt-switch.vue";
 type MtGridMeta = SlottedMeta<typeof MtGrid, "default">;
 
 export default {
-  title: "Components/Layout/MtGrid",
+  title: "Components/Layout/mt-grid",
   component: MtGrid,
   render(args) {
     return {