grid

Props

Prop name	Type	Default	Description
`applyContainer`	`boolean \| undefined`	`false`	Wraps grid in a container if needed, useful for cases when negative margins might cause issues
`align`	`"top" \| "bottom" \| "center" \| undefined`		Controls vertical alignment of columns, matches flexbox's align-items rule
`justify`	`"center" \| "left" \| "right" \| "space-between" \| undefined`		Controls horizontal alignment of columns (distribution), matches flexbox's justify-content rule
`gutterSize`	`"2" \| "4" \| undefined`	`2`	Sets the size of the gutter between grid columns
`children`	`((boolean \| GridColComp \| (HCConditionalChildren \| GridColComp)[] \| Iterable<GridColComp \| (HCConditionalChildren \| GridColComp)[]>) & (string \| ... 4 more ... \| ReactPortal)) \| null \| undefined`		Grid should contain only GridCol components or React.Fragment as direct children
`extraClasses`	`string \| undefined`		Custom class names to add
`innerRef`	`Ref<HTMLDivElement> \| undefined`		ref forwarded to the grid

Grid component acts as a wrapper for GridCol components and is required in order for grid to work. In fact we restrict any other child components inside. There are some props in place for all you column alignment needs as well as optional container wrapping mechanism that aims to solve possible negative margin issues. Please refer to the PropTypes docs for more info.

Usage examples

Basic grid example with columns aligned to the bottom:

import { Grid, GridCol, Input, Button } from '@flixbus/honeycomb-react';
<Grid align="bottom">
  <GridCol size={4}>
    <Input name="grid-input-example" id="grid-input-example" label="First name" />
  </GridCol>
  <GridCol size={4}>
    <Input name="grid-input-example-two" id="grid-input-example-two" label="Last name" />
  </GridCol>
  <GridCol size={4}>
    <Button appearance="primary">Click me!</Button>
  </GridCol>
</Grid>
import { Grid, GridCol, Input, Button } from '@flixbus/honeycomb-react';
<Grid align="bottom">
  <GridCol size={4}>
    <Input name="grid-input-example" id="grid-input-example" label="First name" />
  </GridCol>
  <GridCol size={4}>
    <Input name="grid-input-example-two" id="grid-input-example-two" label="Last name" />
  </GridCol>
  <GridCol size={4}>
    <Button appearance="primary">Click me!</Button>
  </GridCol>
</Grid>

Grid with column justified to the right:

import { Grid, GridCol, Box, Radio, Fieldset, Legend, Button } from '@flixbus/honeycomb-react';
<Grid justify="right">
  <GridCol size={4}>
    <Box>
      <Fieldset>
        <Legend>Your favorite Ramen taste?</Legend>
        <Radio label="Shio" id="Shio" name="ramenTaste" value="shio" />
        <Radio label="Shoyu" id="Shoyu" name="ramenTaste" value="shoyu" />
        <Radio label="Miso" id="Miso" name="ramenTaste" value="miso" />
        <Radio label="Tonkotsu" id="Tonkotsu" name="ramenTaste" value="tonkotsu" />
      </Fieldset>
      <Button appearance="primary" display="block">Submit</Button>
    </Box>
  </GridCol>
</Grid>
import { Grid, GridCol, Box, Radio, Fieldset, Legend, Button } from '@flixbus/honeycomb-react';
<Grid justify="right">
  <GridCol size={4}>
    <Box>
      <Fieldset>
        <Legend>Your favorite Ramen taste?</Legend>
        <Radio label="Shio" id="Shio" name="ramenTaste" value="shio" />
        <Radio label="Shoyu" id="Shoyu" name="ramenTaste" value="shoyu" />
        <Radio label="Miso" id="Miso" name="ramenTaste" value="miso" />
        <Radio label="Tonkotsu" id="Tonkotsu" name="ramenTaste" value="tonkotsu" />
      </Fieldset>
      <Button appearance="primary" display="block">Submit</Button>
    </Box>
  </GridCol>
</Grid>