Grid
A component based on CSS grid for creating layouts.
Usage
import { RGrid, RGridCell } from "@rebilly/revel";
<r-grid>
<r-grid-cell span="6">...</r-grid-cell>
<r-grid-cell span="6">...</r-grid-cell>
</r-grid>
Examples
Basic grid
By default, the grid expands for 12 columns and will wrap to the next row once the combined cells reach 12 spaces (spans) in total. Grid cells will fill the available space in the grid by default.
Keep RGrid columns and RGridCell span equal or lower than 12.
Nested grid
It is possible to nest grids inside each other.
Wrap
Add the wrap property to a RGridCell to make the next cell continue on the next grid row.
Offset
Add the offset property to a RGridCell to move the cell to the right.
Avoid using RGridCell wrap and RGridCell offset props together.
Responsivess
Grid cells will take full width on breakpoint --r-breakpoints-m.
| Name | Type | Default | Description |
|---|---|---|---|
| columns | GridSize | '12' | Number of grid columns (1 to 12) |
| gap | Gap | '6' | Gap between grid columns (0 to 12) |
| justifyItems | Nullable, Distribution | null | Justify items in the grid |
| alignItems | Nullable, Distribution | null | Align items in the grid |
| jutifyContent | Nullable, ContentDistribution | null | Justify content in the grid |
| alignContent | Nullable, ContentDistribution | null | Align content in the grid |
| unstackable | boolean | false | Prevents grid to stack on smaller screens |
| Name | Description |
|---|---|
| default | Grid cell items |
| Name | Type | Default | Description |
|---|---|---|---|
| span | Nullable, GridSize | null | Number of columns the cell will fill (1 to 12) |
| justifySelf | Nullable, Distribution | null | Justify items in the cell |
| alignSelf | Nullable, Distribution | null | Align items in the cell |
| wrap | boolean | false | Move to the next row |
| offset | Nullable, Offset | null | Move the cell to the right. E.g "1, 5" |
| Name | Description |
|---|---|
| default | Cell content |