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. +