Grid
Display elements in a grid layout.
Basic grid
A non-responsive single grid with auto flowing cells configuration.
1
2
3
4
5
6
Show codeHide code
Solid cells
Using the solid prop on cells will occlude the guides that the cell overlaps.
1
2
3
4
5
6
Show codeHide code
Responsive grid
Grid component with responsive rows and columns props at all 3 breakpoints.
1
2
3
4
5
6
Show codeHide code
Responsive Grid with responsive guide clipping cells
Grid component with responsive rows and columns props at all 3 breakpoints as well as guide clipping on specific cells.
1 + 2
3
4
5 + 6
Show codeHide code
Show codeHide code
Show codeHide code
Grid with overlaying cells
Grid component with cells that overlay another in various states.
1
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at felis
3
4
Show codeHide code
Specific Grid with Guide Clipping
Grid component with guide clipping enabled on specific cells.
1
2
3
4
5