{ReStory}

Layout/Grid: Alignment

Grid layout component with column control and alignment
View fullscreen
Source Code
1export const Alignment = component(() => (
2 ​<TallGrid>
3 ​ ​<Grid columns={4} gap="md">
4 ​ ​ ​<GridCol align="start">
5 ​ ​ ​ ​<Box>Align Start</Box>
6 ​ ​ ​</GridCol>
7
8 ​ ​ ​<GridCol align="center">
9 ​ ​ ​ ​<Box>Align Center</Box>
10 ​ ​ ​</GridCol>
11
12 ​ ​ ​<GridCol align="end">
13 ​ ​ ​ ​<Box>Align End</Box>
14 ​ ​ ​</GridCol>
15
16 ​ ​ ​<GridCol align="stretch">
17 ​ ​ ​ ​<Box>Align Stretch</Box>
18 ​ ​ ​</GridCol>
19 ​ ​</Grid>
20 ​</TallGrid>
21));