diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 2997894a17d..a8d8ec9574c 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -69,6 +69,7 @@
       "elevation",
       "flex",
       "float",
+      "grid",
       "opacity",
       "overflow",
       "position",
diff --git a/packages/docs/src/examples/display-grid/auto-fill-cards.vue b/packages/docs/src/examples/display-grid/auto-fill-cards.vue
new file mode 100644
index 00000000000..a34de8ca44d
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/auto-fill-cards.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="d-grid grid-cols-auto-fill-250 ga-4 bg-surface-variant pa-4">
+    <v-sheet
+      v-for="(card, index) in cards"
+      :key="index"
+      class="pa-4"
+    >
+      <div class="text-subtitle-1 mb-2">{{ card.title }}</div>
+      <div class="text-body-2">{{ card.content }}</div>
+    </v-sheet>
+  </div>
+</template>
+
+<script setup>
+  const cards = [
+    {
+      title: 'Short Item',
+      content: 'Brief content here.',
+    },
+    {
+      title: 'Medium Length Item Title',
+      content: 'This item has a moderate amount of content to demonstrate how auto-fill handles different content lengths while maintaining consistent 250px minimum column widths.',
+    },
+    {
+      title: 'Very Long Item Title That Spans Multiple Lines',
+      content: 'This item contains a significant amount of content to show how auto-fill maintains the minimum 250px width while allowing items to grow taller to accommodate varying content lengths. The grid automatically creates as many columns as fit in the container width, and items expand vertically as needed.',
+    },
+    {
+      title: 'Another Item',
+      content: 'Different content length to show variety.',
+    },
+    {
+      title: 'Responsive Item',
+      content: 'Watch how the number of columns changes when you resize the browser window. Auto-fill creates as many 250px columns as can fit in the available space.',
+    },
+    {
+      title: 'Final Item',
+      content: 'Shows how auto-fill handles multiple items with varying heights.',
+    },
+  ]
+</script>
diff --git a/packages/docs/src/examples/display-grid/auto-fill-fit.vue b/packages/docs/src/examples/display-grid/auto-fill-fit.vue
new file mode 100644
index 00000000000..4ecbb9560bb
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/auto-fill-fit.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div class="mb-4">
+      <h6 class="text-subtitle-1 mb-2">Auto-Fill (keeps empty columns, items stay narrow)</h6>
+      <div class="d-grid grid-cols-auto-fill-200 ga-4 bg-surface-variant pa-4" style="width: 100%; min-width: 800px;">
+        <v-sheet
+          v-for="n in 2"
+          :key="n"
+          class="pa-4 text-center"
+          style="min-height: 80px;"
+        >
+          <div class="text-subtitle-2">Fill Item {{ n }}</div>
+          <div class="text-caption">Stays 200px wide</div>
+        </v-sheet>
+      </div>
+    </div>
+
+    <div>
+      <h6 class="text-subtitle-1 mb-2">Auto-Fit (removes empty columns, items stretch to fill)</h6>
+      <div class="d-grid grid-cols-auto-fit-200 ga-4 bg-surface-variant pa-4" style="width: 100%; min-width: 800px;">
+        <v-sheet
+          v-for="n in 2"
+          :key="n"
+          class="pa-4 text-center"
+          style="min-height: 80px;"
+        >
+          <div class="text-subtitle-2">Fit Item {{ n }}</div>
+          <div class="text-caption">Stretches to fill space</div>
+        </v-sheet>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/auto-fit-rows.vue b/packages/docs/src/examples/display-grid/auto-fit-rows.vue
new file mode 100644
index 00000000000..436114bd129
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/auto-fit-rows.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="d-grid grid-rows-auto-fit-120 grid-cols-1 ga-4 bg-surface-variant pa-4" style="height: 400px;">
+    <v-sheet
+      v-for="n in 5"
+      :key="n"
+      class="pa-4 text-center d-flex align-center justify-center"
+    >
+      <div>
+        <div class="text-subtitle-1 mb-2">Row {{ n }}</div>
+        <div class="text-body-2">Auto-fit rows</div>
+      </div>
+    </v-sheet>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/auto-sizing-columns.vue b/packages/docs/src/examples/display-grid/auto-sizing-columns.vue
new file mode 100644
index 00000000000..2a5f012af5d
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/auto-sizing-columns.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="d-grid grid-rows-2 grid-auto-cols-min grid-flow-col ga-4 bg-surface-variant pa-4">
+    <v-sheet class="pa-4 text-center">
+      <div class="text-body-2">Short</div>
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      <div class="text-body-2">This column has much longer content that will expand the width automatically. </div>
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      <div class="text-body-2">Medium content here</div>
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      <div class="text-body-2">Also short</div>
+    </v-sheet>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/basic-grid.vue b/packages/docs/src/examples/display-grid/basic-grid.vue
new file mode 100644
index 00000000000..30abac02d34
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/basic-grid.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="d-grid grid-cols-3 ga-4 bg-surface-variant pa-4">
+    <v-sheet
+      v-for="n in 6"
+      :key="n"
+      class="pa-2 text-center"
+    >
+      Item {{ n }}
+    </v-sheet>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/column-spanning.vue b/packages/docs/src/examples/display-grid/column-spanning.vue
new file mode 100644
index 00000000000..0de40285134
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/column-spanning.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="d-grid grid-cols-6 ga-4 bg-surface-variant pa-4">
+    <v-sheet class="col-span-2 pa-2 text-center">
+      Spans 2 columns
+    </v-sheet>
+    <v-sheet class="col-span-4 pa-2 text-center">
+      Spans 4 columns
+    </v-sheet>
+    <v-sheet class="col-span-3 pa-2 text-center">
+      Spans 3 columns
+    </v-sheet>
+    <v-sheet class="col-span-3 pa-2 text-center">
+      Spans 3 columns
+    </v-sheet>
+    <v-sheet class="col-span-full pa-2 text-center">
+      Spans full width
+    </v-sheet>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/complex-layout.vue b/packages/docs/src/examples/display-grid/complex-layout.vue
new file mode 100644
index 00000000000..bcb4473ac87
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/complex-layout.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="d-grid grid-cols-12 ga-2 bg-surface-variant pa-4">
+    <!-- Header -->
+    <v-sheet class="pa-4 text-center col-span-12">
+      Header
+    </v-sheet>
+
+    <!-- Sidebar -->
+    <v-sheet class="pa-4 text-center col-span-3">
+      Sidebar
+    </v-sheet>
+
+    <!-- Main content -->
+    <v-sheet class="pa-4 text-center col-span-6">
+      Main Content
+    </v-sheet>
+
+    <!-- Right sidebar -->
+    <v-sheet class="pa-4 text-center col-span-3">
+      Right Sidebar
+    </v-sheet>
+
+    <!-- Article grid -->
+    <v-sheet class="pa-4 text-center col-span-4 col-start-4">
+      Article 1
+    </v-sheet>
+    <v-sheet class="pa-4 text-center col-span-4">
+      Article 2
+    </v-sheet>
+    <v-sheet class="pa-4 text-center col-span-4">
+      Article 3
+    </v-sheet>
+
+    <!-- Footer -->
+    <v-sheet class="pa-4 text-center col-span-12">
+      Footer
+    </v-sheet>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/grid-auto-sizing.vue b/packages/docs/src/examples/display-grid/grid-auto-sizing.vue
new file mode 100644
index 00000000000..e9fe81a80ee
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/grid-auto-sizing.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="d-grid grid-cols-2 grid-auto-rows-min ga-4 bg-surface-variant pa-4">
+    <v-sheet class="pa-4 text-center">
+      <div class="text-body-2">Short</div>
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      <div class="text-body-2">This is a much longer piece of content that will expand the row height. Notice how this row is bigger than the other row.</div>
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      <div class="text-body-2">Also short</div>
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      <div class="text-body-2">Another item with content</div>
+    </v-sheet>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/grid-flow-column.vue b/packages/docs/src/examples/display-grid/grid-flow-column.vue
new file mode 100644
index 00000000000..04af7291035
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/grid-flow-column.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="d-grid grid-cols-3 grid-flow-col ga-4 bg-surface-variant pa-4">
+    <v-sheet
+      v-for="n in 6"
+      :key="n"
+      class="pa-4 text-center"
+    >
+      Item {{ n }}
+    </v-sheet>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/grid-positioning.vue b/packages/docs/src/examples/display-grid/grid-positioning.vue
new file mode 100644
index 00000000000..2810080e3d7
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/grid-positioning.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="d-grid grid-cols-3 grid-rows-3 ga-4 bg-surface-variant pa-4">
+    <v-sheet class="pa-4 text-center col-1 row-1">
+      1,1
+    </v-sheet>
+    <v-sheet class="pa-4 text-center col-2 row-2">
+      2,2
+    </v-sheet>
+    <v-sheet class="pa-4 text-center col-3 row-3">
+      3,3
+    </v-sheet>
+    <v-sheet class="pa-4 text-center col-2 row-1">
+      2,1
+    </v-sheet>
+    <v-sheet class="pa-4 text-center col-1 row-3">
+      1,3
+    </v-sheet>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/grid-spans.vue b/packages/docs/src/examples/display-grid/grid-spans.vue
new file mode 100644
index 00000000000..20292e2a6c8
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/grid-spans.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="d-grid grid-cols-4 grid-rows-3 ga-4 bg-surface-variant pa-4">
+    <v-sheet class="pa-4 text-center col-span-2">
+      Spans 2 columns
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      Normal
+    </v-sheet>
+    <v-sheet class="pa-4 text-center row-span-2">
+      <div>Spans</div>
+      <div>2 rows</div>
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      Item 1
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      Item 2
+    </v-sheet>
+    <v-sheet class="pa-4 text-center">
+      Item 3
+    </v-sheet>
+    <v-sheet class="pa-4 text-center col-span-3">
+      Spans 3 columns
+    </v-sheet>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/display-grid/responsive-grid.vue b/packages/docs/src/examples/display-grid/responsive-grid.vue
new file mode 100644
index 00000000000..feb48c374f5
--- /dev/null
+++ b/packages/docs/src/examples/display-grid/responsive-grid.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <div class="d-grid grid-cols-1 grid-cols-md-2 grid-cols-lg-3 ga-4 bg-surface-variant pa-4 mb-6">
+      <v-sheet
+        v-for="n in 6"
+        :key="n"
+        class="pa-2 text-center"
+      >
+        Responsive Item {{ n }}
+      </v-sheet>
+    </div>
+  </div>
+</template>
diff --git a/packages/docs/src/pages/en/styles/grid.md b/packages/docs/src/pages/en/styles/grid.md
new file mode 100644
index 00000000000..8a08b583241
--- /dev/null
+++ b/packages/docs/src/pages/en/styles/grid.md
@@ -0,0 +1,278 @@
+---
+meta:
+  title: Grid
+  description: Grid helper classes allow you to create responsive layouts using CSS Grid with utility classes.
+  keywords: grid helper classes, grid classes, css grid
+related:
+  - /styles/flex/
+  - /styles/display/
+  - /components/grids/
+features:
+  report: true
+---
+
+# Grid
+
+Control the layout of grid containers with template definitions, item placement, and responsive grid utilities powered by CSS Grid.
+
+<PageFeatures />
+
+## Grid Template Classes
+
+| Class | Properties |
+| - | - |
+| **d-grid** | display: grid; |
+| **grid-cols-1** | grid-template-columns: repeat(1, minmax(0, 1fr)); |
+| **grid-cols-2** | grid-template-columns: repeat(2, minmax(0, 1fr)); |
+| **grid-cols-3** | grid-template-columns: repeat(3, minmax(0, 1fr)); |
+| **grid-cols-4** | grid-template-columns: repeat(4, minmax(0, 1fr)); |
+| **grid-cols-5** | grid-template-columns: repeat(5, minmax(0, 1fr)); |
+| **grid-cols-6** | grid-template-columns: repeat(6, minmax(0, 1fr)); |
+| **grid-cols-7** | grid-template-columns: repeat(7, minmax(0, 1fr)); |
+| **grid-cols-8** | grid-template-columns: repeat(8, minmax(0, 1fr)); |
+| **grid-cols-9** | grid-template-columns: repeat(9, minmax(0, 1fr)); |
+| **grid-cols-10** | grid-template-columns: repeat(10, minmax(0, 1fr)); |
+| **grid-cols-11** | grid-template-columns: repeat(11, minmax(0, 1fr)); |
+| **grid-cols-12** | grid-template-columns: repeat(12, minmax(0, 1fr)); |
+| **grid-cols-none** | grid-template-columns: none; |
+| **grid-rows-1** | grid-template-rows: repeat(1, minmax(0, 1fr)); |
+| **grid-rows-2** | grid-template-rows: repeat(2, minmax(0, 1fr)); |
+| **grid-rows-3** | grid-template-rows: repeat(3, minmax(0, 1fr)); |
+| **grid-rows-4** | grid-template-rows: repeat(4, minmax(0, 1fr)); |
+| **grid-rows-5** | grid-template-rows: repeat(5, minmax(0, 1fr)); |
+| **grid-rows-6** | grid-template-rows: repeat(6, minmax(0, 1fr)); |
+| **grid-rows-7** | grid-template-rows: repeat(7, minmax(0, 1fr)); |
+| **grid-rows-8** | grid-template-rows: repeat(8, minmax(0, 1fr)); |
+| **grid-rows-9** | grid-template-rows: repeat(9, minmax(0, 1fr)); |
+| **grid-rows-10** | grid-template-rows: repeat(10, minmax(0, 1fr)); |
+| **grid-rows-11** | grid-template-rows: repeat(11, minmax(0, 1fr)); |
+| **grid-rows-12** | grid-template-rows: repeat(12, minmax(0, 1fr)); |
+| **grid-rows-none** | grid-template-rows: none; |
+
+## Auto-Fill and Auto-Fit Classes
+
+| Class | Properties |
+| - | - |
+| **grid-cols-auto-fill-100** | grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); |
+| **grid-cols-auto-fill-150** | grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
+| **grid-cols-auto-fill-200** | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
+| **grid-cols-auto-fill-250** | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
+| **grid-cols-auto-fill-300** | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
+| **grid-cols-auto-fill-350** | grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); |
+| **grid-cols-auto-fill-400** | grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); |
+| **grid-cols-auto-fill-500** | grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); |
+| **grid-cols-auto-fit-100** | grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); |
+| **grid-cols-auto-fit-150** | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
+| **grid-cols-auto-fit-200** | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
+| **grid-cols-auto-fit-250** | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
+| **grid-cols-auto-fit-300** | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
+| **grid-cols-auto-fit-350** | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); |
+| **grid-cols-auto-fit-400** | grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); |
+| **grid-cols-auto-fit-500** | grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); |
+| **grid-rows-auto-fill-100** | grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)); |
+| **grid-rows-auto-fill-150** | grid-template-rows: repeat(auto-fill, minmax(150px, 1fr)); |
+| **grid-rows-auto-fill-200** | grid-template-rows: repeat(auto-fill, minmax(200px, 1fr)); |
+| **grid-rows-auto-fill-250** | grid-template-rows: repeat(auto-fill, minmax(250px, 1fr)); |
+| **grid-rows-auto-fill-300** | grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); |
+| **grid-rows-auto-fill-350** | grid-template-rows: repeat(auto-fill, minmax(350px, 1fr)); |
+| **grid-rows-auto-fill-400** | grid-template-rows: repeat(auto-fill, minmax(400px, 1fr)); |
+| **grid-rows-auto-fill-500** | grid-template-rows: repeat(auto-fill, minmax(500px, 1fr)); |
+| **grid-rows-auto-fit-100** | grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); |
+| **grid-rows-auto-fit-150** | grid-template-rows: repeat(auto-fit, minmax(150px, 1fr)); |
+| **grid-rows-auto-fit-200** | grid-template-rows: repeat(auto-fit, minmax(200px, 1fr)); |
+| **grid-rows-auto-fit-250** | grid-template-rows: repeat(auto-fit, minmax(250px, 1fr)); |
+| **grid-rows-auto-fit-300** | grid-template-rows: repeat(auto-fit, minmax(300px, 1fr)); |
+| **grid-rows-auto-fit-350** | grid-template-rows: repeat(auto-fit, minmax(350px, 1fr)); |
+| **grid-rows-auto-fit-400** | grid-template-rows: repeat(auto-fit, minmax(400px, 1fr)); |
+| **grid-rows-auto-fit-500** | grid-template-rows: repeat(auto-fit, minmax(500px, 1fr)); |
+
+## Grid Item Placement Classes
+
+| Class | Properties |
+| - | - |
+| **col-auto** | grid-column: auto; |
+| **col-span-1** | grid-column: span 1 / span 1; |
+| **col-span-2** | grid-column: span 2 / span 2; |
+| **col-span-3** | grid-column: span 3 / span 3; |
+| **col-span-4** | grid-column: span 4 / span 4; |
+| **col-span-5** | grid-column: span 5 / span 5; |
+| **col-span-6** | grid-column: span 6 / span 6; |
+| **col-span-7** | grid-column: span 7 / span 7; |
+| **col-span-8** | grid-column: span 8 / span 8; |
+| **col-span-9** | grid-column: span 9 / span 9; |
+| **col-span-10** | grid-column: span 10 / span 10; |
+| **col-span-11** | grid-column: span 11 / span 11; |
+| **col-span-12** | grid-column: span 12 / span 12; |
+| **col-span-full** | grid-column: 1 / -1; |
+| **col-start-1** | grid-column-start: 1; |
+| **col-start-2** | grid-column-start: 2; |
+| **col-start-3** | grid-column-start: 3; |
+| **col-start-4** | grid-column-start: 4; |
+| **col-start-5** | grid-column-start: 5; |
+| **col-start-6** | grid-column-start: 6; |
+| **col-start-7** | grid-column-start: 7; |
+| **col-start-8** | grid-column-start: 8; |
+| **col-start-9** | grid-column-start: 9; |
+| **col-start-10** | grid-column-start: 10; |
+| **col-start-11** | grid-column-start: 11; |
+| **col-start-12** | grid-column-start: 12; |
+| **col-start-13** | grid-column-start: 13; |
+| **col-end-1** | grid-column-end: 1; |
+| **col-end-2** | grid-column-end: 2; |
+| **col-end-3** | grid-column-end: 3; |
+| **col-end-4** | grid-column-end: 4; |
+| **col-end-5** | grid-column-end: 5; |
+| **col-end-6** | grid-column-end: 6; |
+| **col-end-7** | grid-column-end: 7; |
+| **col-end-8** | grid-column-end: 8; |
+| **col-end-9** | grid-column-end: 9; |
+| **col-end-10** | grid-column-end: 10; |
+| **col-end-11** | grid-column-end: 11; |
+| **col-end-12** | grid-column-end: 12; |
+| **col-end-13** | grid-column-end: 13; |
+| **row-auto** | grid-row: auto; |
+| **row-span-1** | grid-row: span 1 / span 1; |
+| **row-span-2** | grid-row: span 2 / span 2; |
+| **row-span-3** | grid-row: span 3 / span 3; |
+| **row-span-4** | grid-row: span 4 / span 4; |
+| **row-span-5** | grid-row: span 5 / span 5; |
+| **row-span-6** | grid-row: span 6 / span 6; |
+| **row-span-7** | grid-row: span 7 / span 7; |
+| **row-span-8** | grid-row: span 8 / span 8; |
+| **row-span-9** | grid-row: span 9 / span 9; |
+| **row-span-10** | grid-row: span 10 / span 10; |
+| **row-span-11** | grid-row: span 11 / span 11; |
+| **row-span-12** | grid-row: span 12 / span 12; |
+| **row-span-full** | grid-row: 1 / -1; |
+| **row-start-1** | grid-row-start: 1; |
+| **row-start-2** | grid-row-start: 2; |
+| **row-start-3** | grid-row-start: 3; |
+| **row-start-4** | grid-row-start: 4; |
+| **row-start-5** | grid-row-start: 5; |
+| **row-start-6** | grid-row-start: 6; |
+| **row-start-7** | grid-row-start: 7; |
+| **row-start-8** | grid-row-start: 8; |
+| **row-start-9** | grid-row-start: 9; |
+| **row-start-10** | grid-row-start: 10; |
+| **row-start-11** | grid-row-start: 11; |
+| **row-start-12** | grid-row-start: 12; |
+| **row-start-13** | grid-row-start: 13; |
+| **row-end-1** | grid-row-end: 1; |
+| **row-end-2** | grid-row-end: 2; |
+| **row-end-3** | grid-row-end: 3; |
+| **row-end-4** | grid-row-end: 4; |
+| **row-end-5** | grid-row-end: 5; |
+| **row-end-6** | grid-row-end: 6; |
+| **row-end-7** | grid-row-end: 7; |
+| **row-end-8** | grid-row-end: 8; |
+| **row-end-9** | grid-row-end: 9; |
+| **row-end-10** | grid-row-end: 10; |
+| **row-end-11** | grid-row-end: 11; |
+| **row-end-12** | grid-row-end: 12; |
+| **row-end-13** | grid-row-end: 13; |
+
+## Grid Flow and Auto Sizing Classes
+
+| Class | Properties |
+| - | - |
+| **grid-flow-row** | grid-auto-flow: row; |
+| **grid-flow-col** | grid-auto-flow: column; |
+| **grid-flow-dense** | grid-auto-flow: dense; |
+| **grid-flow-row-dense** | grid-auto-flow: row dense; |
+| **grid-flow-col-dense** | grid-auto-flow: column dense; |
+| **auto-cols-auto** | grid-auto-columns: auto; |
+| **auto-cols-min** | grid-auto-columns: min-content; |
+| **auto-cols-max** | grid-auto-columns: max-content; |
+| **auto-cols-fr** | grid-auto-columns: minmax(0, 1fr); |
+| **auto-rows-auto** | grid-auto-rows: auto; |
+| **auto-rows-min** | grid-auto-rows: min-content; |
+| **auto-rows-max** | grid-auto-rows: max-content; |
+| **auto-rows-fr** | grid-auto-rows: minmax(0, 1fr); |
+
+<PromotedEntry />
+
+## Usage
+
+Using `display` utilities you can turn any element into a CSS Grid container transforming **direct children elements** into grid items. Using additional grid property utilities, you can customize their layout even further.
+
+<ExamplesExample file="display-grid/basic-grid" />
+
+## Responsive Grid
+
+You can also customize grid utilities, `grid-{breakpoint}-{value}`, to apply based upon various breakpoints.
+
+<ExamplesExample file="display-grid/responsive-grid" />
+
+## Column Spanning
+
+The `col-span-{n}` and `row-span-{n}` utility classes make grid items span multiple columns or rows:
+
+<ExamplesExample file="display-grid/grid-spans" />
+
+## Grid Positioning
+
+The `col-{n}` and `row-{n}` utility classed position items at specific grid locations:
+
+<ExamplesExample file="display-grid/grid-positioning" />
+
+## Complex Layouts
+
+Combine multiple grid utilities for complex layouts:
+
+<ExamplesExample file="display-grid/complex-layout" />
+
+## Auto-Fill and Auto-Fit
+
+Auto-fill and auto-fit create responsive grids that automatically adjust the number of columns based on available space.
+
+Auto-Fill `grid-cols-auto-fill-{size}`
+
+- **Maintains empty columns** when there aren't enough items to fill the row
+- Creates as many columns as can fit based on the minimum size
+- Empty columns remain in the layout (invisible but present)
+- Items keep their minimum width even with extra space
+
+Auto-Fit `grid-cols-auto-fit-{size}`
+
+- **Stretches items** to fill all available space
+- Collapses empty columns and expands filled ones
+- Items grow to use the full container width
+- No empty columns remain in the layout
+
+<ExamplesExample file="display-grid/auto-fill-fit" />
+
+### Practical Usage
+
+Auto-fill works great for card layouts where you want consistent item sizes:
+
+<ExamplesExample file="display-grid/auto-fill-cards" />
+
+## Grid Flow
+
+Control how auto-placed items flow in the grid:
+
+<ExamplesExample file="display-grid/grid-flow-column" />
+
+## Auto Sizing
+
+Control the size of rows implicitly created grid tracks using `grid-auto-rows-min`:
+
+<ExamplesExample file="display-grid/grid-auto-sizing" />
+
+Control the size of rows implicitly created grid tracks using `grid-auto-cols-min`:
+
+<ExamplesExample file="display-grid/auto-sizing-columns" />
+
+## Responsive Variants
+
+All grid classes support responsive variants. Use the format `{class}-{breakpoint}-{value}`.
+
+## Caveats
+
+::: info
+Grid utilities use `!important` in their styling to ensure they override other CSS rules. This is similar to other utility classes in Vuetify.
+:::
+
+::: warning
+Auto-fill and auto-fit rows work best in containers with defined heights. Without a height constraint, rows may not behave as expected.
+:::
diff --git a/packages/vuetify/src/styles/settings/_utilities.scss b/packages/vuetify/src/styles/settings/_utilities.scss
index d6d600a93a5..b4094721c4d 100644
--- a/packages/vuetify/src/styles/settings/_utilities.scss
+++ b/packages/vuetify/src/styles/settings/_utilities.scss
@@ -24,7 +24,7 @@ $utilities: () !default;
         print: true,
         property: display,
         class: d,
-        values: none inline inline-block block table table-row table-cell flex inline-flex
+        values: none inline inline-block block table table-row table-cell flex inline-flex grid
       ),
       "float": (
         responsive: true,
@@ -176,6 +176,96 @@ $utilities: () !default;
         ),
       ),
 
+      // Grid utilities
+      "grid-template-columns": (
+        responsive: true,
+        property: grid-template-columns,
+        class: grid-cols,
+        values: map.merge(
+          generate-grid-template(12),
+          generate-auto-variants()
+        ),
+      ),
+      "grid-template-rows": (
+        responsive: true,
+        property: grid-template-rows,
+        class: grid-rows,
+        values: map.merge(
+          generate-grid-template(12),
+          generate-auto-variants()
+        ),
+      ),
+      "grid-column": (
+        responsive: true,
+        property: grid-column,
+        class: col,
+        values: generate-grid-spans(12),
+      ),
+      "grid-row": (
+        responsive: true,
+        property: grid-row,
+        class: row,
+        values: generate-grid-spans(12),
+      ),
+      "grid-column-start": (
+        responsive: true,
+        property: grid-column-start,
+        class: col-start,
+        values: generate-grid-start-end(13),
+      ),
+      "grid-column-end": (
+        responsive: true,
+        property: grid-column-end,
+        class: col-end,
+        values: generate-grid-start-end(13),
+      ),
+      "grid-row-start": (
+        responsive: true,
+        property: grid-row-start,
+        class: row-start,
+        values: generate-grid-start-end(13),
+      ),
+      "grid-row-end": (
+        responsive: true,
+        property: grid-row-end,
+        class: row-end,
+        values: generate-grid-start-end(13),
+      ),
+      "grid-auto-flow": (
+        responsive: true,
+        property: grid-auto-flow,
+        class: grid-flow,
+        values: (
+          row: row,
+          col: column,
+          dense: dense,
+          row-dense: row dense,
+          col-dense: column dense,
+        ),
+      ),
+      "grid-auto-columns": (
+        responsive: true,
+        property: grid-auto-columns,
+        class: auto-cols,
+        values: (
+          auto: auto,
+          min: min-content,
+          max: max-content,
+          fr: minmax(0, 1fr),
+        ),
+      ),
+      "grid-auto-rows": (
+        responsive: true,
+        property: grid-auto-rows,
+        class: auto-rows,
+        values: (
+          auto: auto,
+          min: min-content,
+          max: max-content,
+          fr: minmax(0, 1fr),
+        ),
+      ),
+
       // gap utilities
       "gap": (
         responsive: true,
diff --git a/packages/vuetify/src/styles/tools/_functions.sass b/packages/vuetify/src/styles/tools/_functions.sass
index 17e47df0010..efa5f43025d 100644
--- a/packages/vuetify/src/styles/tools/_functions.sass
+++ b/packages/vuetify/src/styles/tools/_functions.sass
@@ -80,3 +80,34 @@
 
 @function roundEven($val)
   @return 2 * math.round($val * .5)
+
+// Grid utility generation functions
+@function generate-grid-template($max: 12)
+  $values: ()
+  @for $i from 1 through $max
+    $values: map.merge($values, (#{$i}: repeat(#{$i}, minmax(0, 1fr))))
+  @return map.merge($values, (none: none))
+
+@function generate-auto-variants($sizes: (100, 150, 200, 250, 300, 350, 400, 500))
+  $values: ()
+  @each $size in $sizes
+    $values: map.merge($values, (auto-fill-#{$size}: repeat(auto-fill, minmax(#{$size}px, 1fr)), auto-fit-#{$size}: repeat(auto-fit, minmax(#{$size}px, 1fr))))
+  @return $values
+
+@function generate-grid-positions($max: 12)
+  $values: (auto: auto)
+  @for $i from 1 through $max
+    $values: map.merge($values, (#{$i}: #{$i}))
+  @return $values
+
+@function generate-grid-spans($max: 12)
+  $values: (auto: auto)
+  @for $i from 1 through $max
+    $values: map.merge($values, (#{$i}: #{$i}, span-#{$i}: span #{$i} / span #{$i}))
+  @return map.merge($values, (span-full: 1 / -1))
+
+@function generate-grid-start-end($max: 13)
+  $values: (auto: auto)
+  @for $i from 1 through $max
+    $values: map.merge($values, (#{$i}: #{$i}))
+  @return $values