grid-cell

Column span•
Responsive column span•
Column start•
Responsive column start•
Align variations•
Justify variations

Props

Prop name	Type	Default	Description
`Elem`	`ElementType<any, keyof IntrinsicElements> \| undefined`	`div`	The HTML element to render as the grid cell.
`extraClasses`	`string \| undefined`		Custom class names to add.
`children`	`ReactNode`		The content of the grid cell.
`colSpan`	`GridCellResponsiveSizes \| undefined`		Column size (from 1 to 12) as an absolute value or responsive object.
`colStart`	`GridCellResponsiveSizes \| undefined`		Column start (from 1 to 12) as an absolute value or responsive object.
`alignSelf`	`"stretch" \| "start" \| "center" \| "end" \| undefined`	`stretch`	Alignment of this cell along the cross axis.
`justifySelf`	`"stretch" \| "start" \| "center" \| "end" \| undefined`	`stretch`	Justification of this cell along the main axis.
`innerRef`	`Ref<HTMLElement> \| undefined`		React ref forwarded to the grid cell.

The GridCell component is used inside a Grid.

It supports:

colSpan values for all breakpoints;
colStart values for all breakpoints;

The default column spans 1 column and starts at the first available column.

Column span

The colSpan prop can be used to control how many columns the item should span. Aka: the column width.

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

<Grid withRowGap>
  <GridCell colSpan={12}>
    <Box small>12</Box>
  </GridCell>
  <GridCell colSpan={1}>
    <Box small>1</Box>
  </GridCell>
  <GridCell colSpan={11}>
    <Box small>11</Box>
  </GridCell>
  <GridCell colSpan={2}>
    <Box small>2</Box>
  </GridCell>
  <GridCell colSpan={10}>
    <Box small>10</Box>
  </GridCell>
  <GridCell colSpan={3}>
    <Box small>3</Box>
  </GridCell>
  <GridCell colSpan={9}>
    <Box small>9</Box>
  </GridCell>
  <GridCell colSpan={4}>
    <Box small>4</Box>
  </GridCell>
  <GridCell colSpan={8}>
    <Box small>8</Box>
  </GridCell>
  <GridCell colSpan={5}>
    <Box small>5</Box>
  </GridCell>
  <GridCell colSpan={7}>
    <Box small>7</Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box small>6</Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box small>6</Box>
  </GridCell>
</Grid>
import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid withRowGap>
  <GridCell colSpan={12}>
    <Box small>12</Box>
  </GridCell>
  <GridCell colSpan={1}>
    <Box small>1</Box>
  </GridCell>
  <GridCell colSpan={11}>
    <Box small>11</Box>
  </GridCell>
  <GridCell colSpan={2}>
    <Box small>2</Box>
  </GridCell>
  <GridCell colSpan={10}>
    <Box small>10</Box>
  </GridCell>
  <GridCell colSpan={3}>
    <Box small>3</Box>
  </GridCell>
  <GridCell colSpan={9}>
    <Box small>9</Box>
  </GridCell>
  <GridCell colSpan={4}>
    <Box small>4</Box>
  </GridCell>
  <GridCell colSpan={8}>
    <Box small>8</Box>
  </GridCell>
  <GridCell colSpan={5}>
    <Box small>5</Box>
  </GridCell>
  <GridCell colSpan={7}>
    <Box small>7</Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box small>6</Box>
  </GridCell>
  <GridCell colSpan={6}>
    <Box small>6</Box>
  </GridCell>
</Grid>

Responsive column span

To make column span respond to different breakpoints, the colSpan prop also also accepts an object mapping the value to each breakpoint and a default value in the following format:

{
  default?: number,
  xs?: number,
  sm?: number,
  md?: number,
  lg?: number,
  xl?: number,
}

The breakpoints are mobile-first and will be applied on any resolution smaller and including the given breakpoint, this is translated on CSS as @media (min-width: {breakpoint}).

So in a more realistic example, if we want to create responsive columns we could do it like so:

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

<Grid withRowGap>
  <GridCell colSpan={{ default: 12, sm: 4, lg: 2 }}>
    <Box>
      <Heading id="grid-cell-example-menu-heading" size={3} sectionHeader>Menu</Heading>
      <NavSide aria-labelledby="grid-cell-example-menu-heading">
        <NavItem href="#">Menu item</NavItem>
        <NavItem href="#">Menu item</NavItem>
        <NavItem href="#">Menu item</NavItem>
      </NavSide>
    </Box>
  </GridCell>
  <GridCell colSpan={{ default: 12, sm: 8, lg: 6, xl: 8 }}>
    <Box>
      <article>
        <Heading size={3} sectionHeader>Article</Heading>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien eget nunc gravida tincidunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </article>
    </Box>
  </GridCell>
  <GridCell Elem="aside" colSpan={{ default: 12, lg: 4, xl: 2 }}>
    <ImageBox
      title="Sidebar"
      img={{
        src: 'https://styleguide.hive.flix.tech/img/img-placeholder-grey.png',
        alt: 'Placeholder'
      }}
    />
  </GridCell>
</Grid>
import { Grid, GridCell, Box, NavSide, NavItem, ImageBox, Heading } from '@flixbus/honeycomb-react';

<Grid withRowGap>
  <GridCell colSpan={{ default: 12, sm: 4, lg: 2 }}>
    <Box>
      <Heading id="grid-cell-example-menu-heading" size={3} sectionHeader>Menu</Heading>
      <NavSide aria-labelledby="grid-cell-example-menu-heading">
        <NavItem href="#">Menu item</NavItem>
        <NavItem href="#">Menu item</NavItem>
        <NavItem href="#">Menu item</NavItem>
      </NavSide>
    </Box>
  </GridCell>
  <GridCell colSpan={{ default: 12, sm: 8, lg: 6, xl: 8 }}>
    <Box>
      <article>
        <Heading size={3} sectionHeader>Article</Heading>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien eget nunc gravida tincidunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </article>
    </Box>
  </GridCell>
  <GridCell Elem="aside" colSpan={{ default: 12, lg: 4, xl: 2 }}>
    <ImageBox
      title="Sidebar"
      img={{
        src: 'https://styleguide.hive.flix.tech/img/img-placeholder-grey.png',
        alt: 'Placeholder'
      }}
    />
  </GridCell>
</Grid>

Column start

The colStart prop can be used to manually set the column the item should start. In the legacy grid this was known as push.

By default the grid column will be placed on the first available column as long as it can fit in the available columns.

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

<Grid withRowGap>
  <GridCell colSpan={12}>
    <Box small>
      1
    </Box>
  </GridCell>
  <GridCell colSpan={11} colStart={2}>
    <Box small>
      2
    </Box>
  </GridCell>
  <GridCell colSpan={10} colStart={3}>
    <Box small>
      3
    </Box>
  </GridCell>
  <GridCell colSpan={9} colStart={4}>
    <Box small>
      4
    </Box>
  </GridCell>
  <GridCell colSpan={8} colStart={5}>
    <Box small>
      5
    </Box>
  </GridCell>
  <GridCell colSpan={7} colStart={6}>
    <Box small>
      6
    </Box>
  </GridCell>
  <GridCell colSpan={6} colStart={7}>
    <Box small>
      7
    </Box>
  </GridCell>
  <GridCell colSpan={5} colStart={8}>
    <Box small>
      8
    </Box>
  </GridCell>
  <GridCell colSpan={4} colStart={9}>
    <Box small>
      9
    </Box>
  </GridCell>
  <GridCell colSpan={3} colStart={10}>
    <Box small>
      10
    </Box>
  </GridCell>
  <GridCell colSpan={2} colStart={11}>
    <Box small>
      11
    </Box>
  </GridCell>
  <GridCell colStart={12}>
    <Box small>
      12
    </Box>
  </GridCell>
</Grid>
import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid withRowGap>
  <GridCell colSpan={12}>
    <Box small>
      1
    </Box>
  </GridCell>
  <GridCell colSpan={11} colStart={2}>
    <Box small>
      2
    </Box>
  </GridCell>
  <GridCell colSpan={10} colStart={3}>
    <Box small>
      3
    </Box>
  </GridCell>
  <GridCell colSpan={9} colStart={4}>
    <Box small>
      4
    </Box>
  </GridCell>
  <GridCell colSpan={8} colStart={5}>
    <Box small>
      5
    </Box>
  </GridCell>
  <GridCell colSpan={7} colStart={6}>
    <Box small>
      6
    </Box>
  </GridCell>
  <GridCell colSpan={6} colStart={7}>
    <Box small>
      7
    </Box>
  </GridCell>
  <GridCell colSpan={5} colStart={8}>
    <Box small>
      8
    </Box>
  </GridCell>
  <GridCell colSpan={4} colStart={9}>
    <Box small>
      9
    </Box>
  </GridCell>
  <GridCell colSpan={3} colStart={10}>
    <Box small>
      10
    </Box>
  </GridCell>
  <GridCell colSpan={2} colStart={11}>
    <Box small>
      11
    </Box>
  </GridCell>
  <GridCell colStart={12}>
    <Box small>
      12
    </Box>
  </GridCell>
</Grid>

Responsive column start

The colStart prop also supports breakpoint object, identically to the colSpan prop explained above.

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

<Grid>
  <GridCell colSpan={3} colStart={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 10 }}>
    <Box small>
      This col shifts right as the screen size increases.
    </Box>
  </GridCell>
</Grid>
import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid>
  <GridCell colSpan={3} colStart={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 10 }}>
    <Box small>
      This col shifts right as the screen size increases.
    </Box>
  </GridCell>
</Grid>

Align variations

Use the alignSelf prop to align an individual item on the cross axis: top/start, center, or bottom/end.

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

<Grid withRowGap style={{ minHeight: '150px' }}>
  <GridCell colSpan={4} alignSelf="start">
    <Box small>start</Box>
  </GridCell>
  <GridCell colSpan={4} alignSelf="center">
    <Box small>center</Box>
  </GridCell>
  <GridCell colSpan={4} alignSelf="end">
    <Box small>end</Box>
  </GridCell>
</Grid>
import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid withRowGap style={{ minHeight: '150px' }}>
  <GridCell colSpan={4} alignSelf="start">
    <Box small>start</Box>
  </GridCell>
  <GridCell colSpan={4} alignSelf="center">
    <Box small>center</Box>
  </GridCell>
  <GridCell colSpan={4} alignSelf="end">
    <Box small>end</Box>
  </GridCell>
</Grid>

Justify variations

Use the justifySelf prop to position an individual item along the main axis: left/start, center, or right/end.

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

<Grid withRowGap>
  <GridCell colSpan={4} justifySelf="start">
    <Box small>start</Box>
  </GridCell>
  <GridCell colSpan={4} justifySelf="center">
    <Box small>center</Box>
  </GridCell>
  <GridCell colSpan={4} justifySelf="end">
    <Box small>end</Box>
  </GridCell>
</Grid>
import { Grid, GridCell, Box } from '@flixbus/honeycomb-react';

<Grid withRowGap>
  <GridCell colSpan={4} justifySelf="start">
    <Box small>start</Box>
  </GridCell>
  <GridCell colSpan={4} justifySelf="center">
    <Box small>center</Box>
  </GridCell>
  <GridCell colSpan={4} justifySelf="end">
    <Box small>end</Box>
  </GridCell>
</Grid>