grid-col
Props
| Prop name | Type | Default | Description |
|---|---|---|---|
extraClasses | string | undefined | Custom class names to add | |
children | ReactNode | Children are required, no empty columns allowed, use push props instead | |
inline | boolean | undefined | false | Makes column width to adjust depending on it's children |
size | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Column size (from 1 to 12) for XS breakpoint and above | |
sm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Column size (from 1 to 12) for SM breakpoint and above | |
md | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Column size (from 1 to 12) for MD breakpoint and above | |
lg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Column size (from 1 to 12) for LG breakpoint and above | |
xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Column size (from 1 to 12) for XL breakpoint and above | |
push | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Push columns class size (from 1 to 12) for XS breakpoint and above | |
pushSm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Push columns class size (from 1 to 12) for SM breakpoint and above | |
pushMd | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Push columns class size (from 1 to 12) for MD breakpoint and above | |
pushLg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Push columns class size (from 1 to 12) for LG breakpoint and above | |
pushXl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined | Push columns class size (from 1 to 12) for XL breakpoint and above | |
innerRef | Ref<HTMLDivElement> | undefined | ref forwarded to the grid col |
GridCol components represent columns of the grid and should only be used in combination with the Grid component.
We strongly recommend to not mix layout and content presentation layers so any injection of additional styles with extraClasses is restricted for now.
We also discouraging the usage of empty columns, thus children prop is required, please use "push" props in order to get the same result.
Please refer to the PropTypes docs for more info about which props are available and hot to set sizes on different breakpoints.
Usage examples
Nested grids:
import { Grid, GridCol, Box } from '@flixbus/honeycomb-react'; <Grid> <GridCol size={6}> <Grid> <GridCol size={12} sm={6} xl={4}> <Box>col-12 sm-6 xl-4</Box> </GridCol> <GridCol size={12} sm={6} xl={8}> <Box>col-12 sm-6 xl-8</Box> </GridCol> </Grid> </GridCol> </Grid>
Responsive columns with wrapping:
import { Grid, GridCol, Box } from '@flixbus/honeycomb-react'; <Grid> <GridCol size={3} xl={4}><Box>col-3 xl-4</Box></GridCol> <GridCol size={3} xl={4}><Box>col-3 xl-4</Box></GridCol> <GridCol size={3} xl={4}><Box>col-3 xl-4</Box></GridCol> <GridCol size={3} xl={4}><Box>col-3 xl-3</Box></GridCol> <GridCol size={3} xl={4}><Box>col-4 xl-3</Box></GridCol> <GridCol size={3} xl={4}><Box>col-4 xl-3</Box></GridCol> <GridCol size={3} xl={4}><Box>col-4 xl-3</Box></GridCol> </Grid>
If no props provided columns adjust their width automatically:
import { Grid, GridCol, Box } from '@flixbus/honeycomb-react'; <Grid> <GridCol><Box>Auto</Box></GridCol> <GridCol><Box>Auto</Box></GridCol> <GridCol><Box>Auto</Box></GridCol> </Grid>
Inline variation makes column width adjusting to it's children, which is handy if you need to display icons and text side by side:
import { Grid, GridCol, Box } from '@flixbus/honeycomb-react'; import { Icon, IconBus } from '@flixbus/honeycomb-icons-react'; <Box> <Grid> <GridCol inline><Icon InlineIcon={IconBus} aria-hidden="true" /></GridCol> <GridCol>Bus icons are great!</GridCol> </Grid> </Box>
Push classes:
import { Grid, GridCol, Box } from '@flixbus/honeycomb-react'; <Grid> <GridCol size={3} push={3}><Box>col-3 push-3</Box></GridCol> <GridCol size={3} push={3}><Box>col-3 push-3</Box></GridCol> </Grid>