diff --git a/docs/src/pages/components/Grid.svx b/docs/src/pages/components/Grid.svx
index 0092b662..741eea4d 100644
--- a/docs/src/pages/components/Grid.svx
+++ b/docs/src/pages/components/Grid.svx
@@ -6,34 +6,62 @@ components: ["Grid", "Row", "Column"]
import Preview from "../../components/Preview.svelte";
+The `Grid` system provides a responsive, 12-column layout structure. Use `Row` and
+`Column` components to create flexible layouts that adapt to different screen
+sizes. The grid supports various spacing options and column configurations.
+
## Default
+Create a basic grid layout with equal-width columns. This example demonstrates the
+default grid behavior.
+
## Full width
+Use the full-width grid variant for layouts that span the entire viewport width.
+This removes the default max-width constraint.
+
## Narrow
+Create a more compact grid layout using the narrow variant. This reduces the
+spacing between columns.
+
## Condensed
+Use the condensed variant for even tighter spacing between columns. This is ideal
+for dense data displays.
+
## Responsive
+Build responsive layouts by specifying different column widths for different
+breakpoints. The grid automatically adjusts based on screen size.
+
## Offset columns
+Create space between columns using the offset feature. This allows for more
+flexible layouts without empty columns.
+
## Aspect ratio columns
+Maintain consistent column heights using aspect ratio columns. This ensures
+content alignment across different column widths.
+
## Padded columns
+Add padding to columns using the padded variant. This creates more breathing room
+between content.
+