Grid

Display elements in a grid layout.

Grid

A non-responsive grid with no cells.

Basic grid

A non-responsive single grid with auto flowing cells configuration.

1
2
3
4
5
6

Solid cells

Using the solid prop on cells will occlude the guides that the cell overlaps

1
2
3
4
5
6

Responsive grid

Grid component with responsive rows and columns props at all 3 breakpoints.

1
2
3
4
5
6

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

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

Specific Grid with Guide Clipping

Grid component with guide clipping enabled on specific cells.

1
2
3
4
5