React Alegrify UI
Grid
Variants
Default
A
A
A
A
A
A
A
A
A
<Grid>
<GridCell three>A</GridCell>
<GridCell three>A</GridCell>
<GridCell three>A</GridCell>
<GridCell three>A</GridCell>
<GridCell four>A</GridCell>
<GridCell four>A</GridCell>
<GridCell four>A</GridCell>
<GridCell six>A</GridCell>
<GridCell six>A</GridCell>
</Grid>Reverse
A
B
C
D
<Grid reverse>
<GridCell three>A</GridCell>
<GridCell three>B</GridCell>
<GridCell three>C</GridCell>
<GridCell three>D</GridCell>
</Grid>Bleed
A
B
C
D
<Grid bleed>
<GridCell three>A</GridCell>
<GridCell three>B</GridCell>
<GridCell three>C</GridCell>
<GridCell three>D</GridCell>
</Grid>All viewports
A
B
C
D
<Grid all>
<GridCell three>A</GridCell>
<GridCell three>B</GridCell>
<GridCell three>C</GridCell>
<GridCell three>D</GridCell>
</Grid>Cell width properties (apply to GridCell)
- one (1 / 12)
- two (2 / 12)
- three (3 / 12)
- four (4 / 12)
- five (5 / 12)
- six (6 / 12)
- seven (7 / 12)
- eight (8 / 12)
- nine (9 / 12)
- ten (10 / 12)
- eleven (11 / 12)
Align cells properties (apply to Grid)
- left
- center
- right
- outline
- even
- top
- middle
- bottom
- stretch
Other Properties
| Property | Type | Default |
|---|---|---|
| children | any | |
| className | string | |
| left | bool | |
| center | bool | |
| right | bool | |
| top | bool | |
| middle | bool | |
| bottom | bool | |
| outline | bool | |
| even | bool | |
| reverse | bool | |
| all | bool | |
| dataTest | string | |
| dataTestId | string |