A utility component for building CSS grid layouts.
Importing
The component can be imported via:
Columns
The columns prop accepts a number, string, or array of strings.
If the value is a number, the grid will have that many equal columns.
If the value is a string, it will be set as the CSS
grid-template-columns property,
which defines the number and sizes of columns.
If a string array is provided, it will also be used for grid-template-columns,
with the values joined by a space (e.g. ['1fr', 'auto'] becomes 1fr auto).
Gap
The gap between items can be controlled with the gap prop, which accepts
space token values. rowGap and columnGap are also available for
more fine-grained control of the gaps.
Areas
grid-template-areas can be set via the areas prop. It accepts a string,
or an array of strings, which will be mapped into one string
(e.g. ["header header", "nav main", "footer footer"] turns into
"header header" "nav main" "footer footer").
API
Default:start
Distribution of space around child items along the cross axis. MDN Align Content
Default:stretch
Alignment of children within their container. MDN Align Items
grid-template-areas definitions for the grid.
Default:row
The grid auto-placement algorithm to use. MDN Grid Auto Flow
The space between columns. See space tokens / MDN Column Gap
grid-template-columns definitions for the grid, or number of columns.
Default:grid
The display property.
The space between rows and columns. See space tokens / MDN Gap
Default:start
How space is distributed along the main axis. MDN Justify Content
Defines default justifySelf for all items in the grid.
MDN Justify Items
The space between rows. See space tokens / MDN Row Gap
grid-template-rows definitions for the grid.