Grid
The <Grid>
component is a versatile tool to arrange child elements within a two-dimensional grid structure (CSS Grid).
Usage
<Grid>
allows full control over columns and rows sizes, spacing between children, and the overall height. It is highly customizable, so that the <Grid>
can be used optimally for complex layouts.
One of the benefits of using <Grid>
is that its associated component, <Grid.Area>
, don't need to be arranged in any specific order. They will be automatically positioned based on their name
prop. If you'd like to understand more about how grid template areas function, you can find a detailed article here.
Holy Grail
Below you find an example demonstrating how to create the holy grail layout using the <Grid>
component below. It is usefull if you need easy vertical and horizontal alignment of content while staying responsive.
Bento
The <Grid>
component can also be used to create bento layouts. Here is an examples for a more complex grid, where every element has its own dimensions.




Props
Grid
alignX?
"left" | "center" | "right";
alignY?
"center" | "top" | "bottom";
areas
string[]
grid-template-areas
.aria-describedby?
string;
aria-details?
string;
aria-label?
string;
aria-labelledby?
string;
aria-live?
"off" | "polite" | "assertive";
- 'off': Updates are not announced unless focused.
- 'polite': Updates are announced when the user is idle.
- 'assertive': Updates are announced immediately, interrupting other announcements.
children?
ReactNode;
columns
TemplateValue[]
height?
HeightProp;
"auto"
id?
string;
role?
(string & {}) | "region";
region
is used as a role, an aria-label
or aria-labelledby
must be provided.
See MDN.rows
TemplateValue[]
space?
GapSpaceProp;
0
Grid.Area
children?
ReactNode;
name
string;
Alternative components
Since the <Grid>
component should be used when you need to create more complex layouts, the following components can can help you if you need simpler layout structures.
- Tiles: With
<Tiles>
you have the possibility to create equal wide elements in a grid system. - Column: If you need to have elements placed in one line.