Anatomy
- Grid: Container that specifies the column structure.
- Grid item: Item container that spans a defined number of columns.
Usage Guidelines
When to use this component
- When elements must align across both rows and columns with consistent sizing and spacing.
When not to use this component
-
When items only need to flow in one direction (row or column) and don’t need to align with each other across a second axis
Best Practices
Use grid for pages or section that benefit from organized structures (e.g, settings page)
Don’t use Grid when a simple one-directional flow fits the use case better. Use Stack instead.
General Component Behaviors
Grid
- By default grid adapts it’s height to it’s children. It can be changed with a full-height prop.
Grid Item
- By default, a grid-item spans 1 column.
- The column-span prop defines how many columns an item occupies.
- If two items would overlap (e.g. one spans 1–5 and the next starts at 4), the later item is placed in the next row to avoid overlap.
- If no explicit start column is given, the item is placed in the first available free column.
Responsive Behavior
Grid and grid-item use media queries for responsive behavior. This allows elements inside the grid to adapt to the size of the viewport, enabling a more dynamic and flexible design.
Gap
To set a gap at specific breakpoints, pass an object to the gap prop. Gap supports 4 values that correspond with our spacing tokens: small, medium, large, xlarge.
Grid-item
To set a grid-item's column-span at specific breakpoints, pass an object with the configuration to the column-span prop.
Available breakpoints
|
Breakpoint |
Min-width |
|---|---|
|
xs |
320px |
|
s |
544px |
|
m |
768px |
|
l |
992px |
|
xl |
1280px |
|
xxl |
1440px |
Known Gaps
- Customizing vertical and horizontal gaps independently.