Skip to main contentSkip to site searchSkip to component search
Honeycomb

grid-col

Props

Prop nameTypeDefaultDescription
extraClassesstring | undefined

Custom class names to add

childrenReactNode

Children are required, no empty columns allowed, use push props instead

inlineboolean | undefined

Makes column width to adjust depending on it's children

size1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined

Column size (from 1 to 12) for XS breakpoint and above

sm1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined

Column size (from 1 to 12) for SM breakpoint and above

md1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined

Column size (from 1 to 12) for MD breakpoint and above

lg1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined

Column size (from 1 to 12) for LG breakpoint and above

xl1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined

Column size (from 1 to 12) for XL breakpoint and above

push1 | 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

pushSm1 | 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

pushMd1 | 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

pushLg1 | 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

pushXl1 | 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

innerRefRef<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 key="grid-nested-a" size={12} sm={6} xl={4}>
        <Box>col-12 sm-6 xl-4</Box>
      </GridCol>
      <GridCol key="grid-nested-b" 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 key="grid-wrap-a" size={3} xl={4}><Box>col-3 xl-4</Box></GridCol>
  <GridCol key="grid-wrap-b" size={3} xl={4}><Box>col-3 xl-4</Box></GridCol>
  <GridCol key="grid-wrap-c" size={3} xl={4}><Box>col-3 xl-4</Box></GridCol>
  <GridCol key="grid-wrap-d" size={3} xl={4}><Box>col-3 xl-3</Box></GridCol>
  <GridCol key="grid-wrap-e" size={3} xl={4}><Box>col-4 xl-3</Box></GridCol>
  <GridCol key="grid-wrap-f" size={3} xl={4}><Box>col-4 xl-3</Box></GridCol>
  <GridCol key="grid-wrap-g" 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 key="grid-auto-a"><Box>Auto</Box></GridCol>
  <GridCol key="grid-auto-b"><Box>Auto</Box></GridCol>
  <GridCol key="grid-auto-c"><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 key="grid-inline-a"><Icon InlineIcon={IconBus} /></GridCol>
    <GridCol key="grid-inline-b">Bus icons are great!</GridCol>
  </Grid>
</Box>

Push classes:

import { Grid, GridCol, Box } from '@flixbus/honeycomb-react';
<Grid>
  <GridCol key="grid-push-a" size={3} push={3}><Box>col-3 push-3</Box></GridCol>
  <GridCol key="grid-push-b" size={3} push={3}><Box>col-3 push-3</Box></GridCol>
</Grid>