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 key="grid-btm-a" size={4}>
    <Input
    name="grid-input-example"
    id="grid-input-example"
    label="First name"
    />
  </GridCol>
  <GridCol key="grid-btm-b" size={4}>
    <Input
      name="grid-input-example-two"
      id="grid-input-example-two"
      label="Last name"
    />
  </GridCol>
  <GridCol key="grid-btm-c" size={4}>
    <Button appearance={'primary'}>Click me!</Button>
  </GridCol>
</Grid>
import { Grid, GridCol, Input, Button } from '@flixbus/honeycomb-react';
<Grid align="bottom">
  <GridCol key="grid-btm-a" size={4}>
    <Input
    name="grid-input-example"
    id="grid-input-example"
    label="First name"
    />
  </GridCol>
  <GridCol key="grid-btm-b" size={4}>
    <Input
      name="grid-input-example-two"
      id="grid-input-example-two"
      label="Last name"
    />
  </GridCol>
  <GridCol key="grid-btm-c" 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 key="unique-grid-example-key-a">Your favorite Ramen taste?</Legend>
        <Radio key="unique-grid-example-key-b" label="Shio" id="Shio" name="ramenTaste" value="shio" />
        <Radio key="unique-grid-example-key-c" label="Shoyu" id="Shoyu" name="ramenTaste" value="shoyu" />
        <Radio key="unique-grid-example-key-d" label="Miso" id="Miso" name="ramenTaste" value="miso" />
        <Radio key="unique-grid-example-key-e" 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 key="unique-grid-example-key-a">Your favorite Ramen taste?</Legend>
        <Radio key="unique-grid-example-key-b" label="Shio" id="Shio" name="ramenTaste" value="shio" />
        <Radio key="unique-grid-example-key-c" label="Shoyu" id="Shoyu" name="ramenTaste" value="shoyu" />
        <Radio key="unique-grid-example-key-d" label="Miso" id="Miso" name="ramenTaste" value="miso" />
        <Radio key="unique-grid-example-key-e" label="Tonkotsu" id="Tonkotsu" name="ramenTaste" value="tonkotsu" />
      </Fieldset>
      <Button appearance={'primary'} display="block">Submit</Button>
    </Box>
  </GridCol>
</Grid>