SimpleGrid
Responsive grid where each item takes equal amount of space
Import
Source
Docs
Package
Usage
SimpleGrid is a simple css grid container where each child is treated as a column. Each column takes equal amount of space and unlike Grid component you do not control column span, instead you specify number of columns per row:
1
2
3
4
5
Spacing
xs
sm
md
lg
xl
VerticalSpacing
xs
sm
md
lg
xl
Breakpoints
Provide an array to breakpoints
prop to define responsive behavior:
maxWidth
orminWidth
– max-width or min-width at which media query will workcols
– number of columns per row at given max-widthspacing
– optional spacing at given max-width, if not provided spacing from component prop will be used instead
Resize browser to see breakpoints behavior:
1
2
3
4
5
In this example:
- If screen width is more than 980px then component
cols
andspacing
is used – 4 columns, lg spacing - screen width < 62em and > 48em – cols = 3, spacing = md
- screen width < 48em and > 36em – cols = 2, spacing = sm
- screen width < 36em – cols = 1, spacing = sm
You can also use breakpoints from theme to set maxWidth
:
1
2
3
4
5
min-width breakpoints
If you prefer a mobile first approach, you can use min-width breakpoints:
Spacing
You can use either theme.spacing
value or number value for spacing in px:
Spacing also works in breakpoints
:
Browser support
Simple grid uses CSS Grid Layout, check caniuse to find out information about browser support.
SimpleGrid component props
Name | Type | Description |
---|---|---|
breakpoints | SimpleGridBreakpoint[] | Breakpoints data to change items per row and spacing based on max-width |
cols | number | Default amount of columns, used when none of breakpoints can be applied |
spacing | number | "xs" | "sm" | "md" | "lg" | "xl" | Spacing between columns, used when none of breakpoints can be applied |
verticalSpacing | number | "xs" | "sm" | "md" | "lg" | "xl" | Vertical spacing between columns, used when none of breakpoints can be applied |