Grid
Arrange elements in a grid structure.
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 useful 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 example for a more complex grid, where every element has its own dimensions.
Props
Grid
Prop
Type
Accessibility props (6)
Prop
Type
Grid.Area
Prop
Type
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. - Columns: If you need to have elements placed in one line.