The Grid component provides a flexible foundation for creating responsive layouts. Here are practical code examples showing different usage patterns.

Basic Grid

Create a basic grid layout with container and size props. The size prop accepts values from 1-12 representing column spans.

Responsive Grid

Use breakpoint objects to define different layouts for different screen sizes. Each breakpoint applies to that size and larger unless overridden.

Grid Spacing

Control the space between grid items using the spacing prop. The value corresponds to theme spacing units.

Row and Column Spacing

Use rowSpacing and columnSpacing for independent control over row and column gaps.

Auto Layout

Use flexible sizing options for dynamic layouts that adapt to content.

Growing Columns

Use size="grow" to make columns take up available space equally.

Variable Width Content

Use size="auto" to size columns based on their content width.

Grid Offset

Use the offset prop to push grid items to the right, creating gaps or asymmetrical layouts.

Centered Content

Center content within grid items using flexbox properties directly on the Grid component.

Column Direction

Use the direction="column" prop to stack grid items vertically instead of horizontally.