Skip to main contentSkip to site searchSkip to component search
Honeycomb

grid

Props

Prop nameTypeDefaultDescription
ElemElementType<any, keyof IntrinsicElements> | undefineddiv

The HTML element to render as the grid container.

extraClassesstring | undefined

Additional classes to be added to the grid.

children((boolean | GridCellComp | (HCConditionalChildren | GridCellComp)[] | Iterable<GridCellComp | (HCConditionalChildren | GridCellComp)[]>) & (string | ... 6 more ... | Promise<...>)) | null | undefined

The content of the grid. Currently, mostly GridCell components. GridCell

align"stretch" | "start" | "center" | "end" | undefinedstretch

Alignment of the grid items on the cross axis.

justify"stretch" | "start" | "center" | "end" | undefinedstretch

Alignment of the grid items on the main axis.

gutter4 | 2 | undefined2

The gutter size between grid items.

withRowGapboolean | undefinedfalse

Whether to add a gap between grid rows.

innerRefRef<HTMLElement> | undefined

React ref forwarded to the grid.

The Grid component is the layout container for arranging content in a page.

It is designed to be used together with GridCell children.

Default grid

By default, the grid uses:

  • gutter 2;
  • no row gap;
import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid>
  <GridCell colSpan={4}>
    <Box small>Col</Box>
  </GridCell>
  <GridCell colSpan={4}>
    <Box small>Col</Box>
  </GridCell>
  <GridCell colSpan={4}>
    <Box small>Col</Box>
  </GridCell>
  <GridCell colSpan={4}>
    <Box small>Col</Box>
  </GridCell>
  <GridCell colSpan={4}>
    <Box small>Col</Box>
  </GridCell>
  <GridCell colSpan={4}>
    <Box small>Col</Box>
  </GridCell>
</Grid>

Gutter options

The gutter is the space between the grid columns (and optionally grid rows), and it can be changed to "4" (spacing-4) if need more breathing room.

import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid gutter={4}>
  <GridCell colSpan={6}>
    <Box>Gutter 4</Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box>Gutter 4</Box>
  </GridCell>
</Grid>

Align options

You can use the align prop to control how the items are positioned in the grid along the cross axis.

If no prop is set, the grid follows the default CSS grid alignment of stretch.

import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid align="start" style={{ minHeight: '180px', backgroundColor: 'var(--hcr-highlight-color)', border: '1px dashed var(--hcr-ui-primary-color)' }}>
  <GridCell colSpan={12}>
    <Box>
      Align start
    </Box>
  </GridCell>
</Grid>

import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid align="center" style={{ minHeight: '180px', backgroundColor: 'var(--hcr-highlight-color)', border: '1px dashed var(--hcr-ui-primary-color)' }}>
  <GridCell colSpan={12}>
    <Box>
      Align center
    </Box>
  </GridCell>
</Grid>

import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid align="end" style={{ minHeight: '180px', backgroundColor: 'var(--hcr-highlight-color)', border: '1px dashed var(--hcr-ui-primary-color)' }}>
  <GridCell colSpan={12}>
    <Box>
      Align end
    </Box>
  </GridCell>
</Grid>

Justify options

You can use the justify prop to control how the items are positioned in the grid along the main axis.

If no prop is set, the grid follows the default CSS grid justify of stretch.

import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid justify="start" style={{ backgroundColor: 'var(--hcr-highlight-color)', border: '1px dashed var(--hcr-ui-primary-color)' }}>
  <GridCell colSpan={6}>
    <Box>
      Justify start
    </Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box>
      Justify start
    </Box>
  </GridCell>
</Grid>

import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid justify="center" style={{ backgroundColor: 'var(--hcr-highlight-color)', border: '1px dashed var(--hcr-ui-primary-color)' }}>
  <GridCell colSpan={6}>
    <Box>
      Justify center
    </Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box>
      Justify center
    </Box>
  </GridCell>
</Grid>

import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid justify="end" style={{ backgroundColor: 'var(--hcr-highlight-color)', border: '1px dashed var(--hcr-ui-primary-color)' }}>
  <GridCell colSpan={6}>
    <Box>
      Justify end
    </Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box>
      Justify end
    </Box>
  </GridCell>
</Grid>

With row gap

Use the withRowGap prop add a gap between the rows.

Rows are formed when the number of columns spanned by the grid columns exceeds 12.

import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid withRowGap>
  <GridCell colSpan={6}>
    <Box>
      Column 1 / Row 1
    </Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box>
      Column 2 / Row 1
    </Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box>
      Column 1 / Row 2
    </Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box>
      Column 2 / Row 2
    </Box>
  </GridCell>
</Grid>