Back to Grid
View full API on Grid
Grid
Responsive layout
A content + sidebar layout that stacks on mobile.
Main content
Spans 2 of 3 columns from md up.
Sidebar
Stacks on mobile, 1 column on md+.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | 1-12 | 12 | Base column count. |
| colsSm / colsMd / colsLg / colsXl | 1-12 | — | Column count from each breakpoint up. |
| gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 4 | Grid gap. |
| span (GridItem) | 1-12 | "full" | "auto" | — | Base column span. |
| spanSm / spanMd / spanLg / spanXl (GridItem) | 1-12 | "full" | "auto" | — | Column span from each breakpoint up. |