Grid

The grid is a layout component to build mobile-first interfaces.

import { Grid } from '@backyard-ui/core';

Use the size prop to set the column width.

To set a column with variable width use the size prop with value auto.

Use isGrow prop to set all columns to width 100%.

Use the offset prop to add margin-left to target column.

Use the gutter prop to set the gap between columns.

Use the align and justify prop to align the columns vertically or horizontally.

By default, the grid uses 12 columns layout, you can change it by setting the columns prop on the Grid component.

In this example, first column takes 50% with size 12 (12/24), second and third take 25% (6/24):

You can make it responsive by passing array or object values into the size prop.

• children required
  Description The children elements

  Type

  ReactNode
• align
  Description The CSS `align-items` property

  Type

  "center" | "start" | "end" | "baseline" | "stretch"
• justify
  Description The CSS `justify-content` property

  Type

  "center" | "start" | "end" | "between" | "around" | "evenly"
• columns
  Description The amount of columns in each row

  Type

  number

  Default

  12
• isGrow
  Description If true the all columns will occupy remaining columns by setting 'flex-grow: 1'

  Type

  boolean

  Default

  false
• gutter
  Description The space between each column

  Type

  "xs" | "sm" | "md" | "lg" | "xl"

  Default

  lg
• noGutters
  Description If true remove the space between columns

  Type

  boolean

  Default

  false
• isReverse
  Description The CSS `flex-direction` property

  Type

  boolean

  Default

  false

• size
  Description The number of columns the component will take place. The value might be a number for all breakpoints or an object that will apply each value based on the key breakpoint, eg: { md: 8 } will create a style for the md media query with a size of 8 columns.

  Type

  ResponsiveValue<number | "auto">
• offset
  Description The number of columns the component will skip. The value might be a number for all breakpoints or an object that will apply each value based on the key breakpoint, eg: { md: 8 } will create a style for the md media query with an offset of 8 columns. Accepts negative values as well.

  Type

  ResponsiveValue<number>
• isGrow
  Description If true the component will occupy remaining columns by setting 'flex-grow: 1'

  Type

  boolean
• children required
  Description The child nodes

  Type

  ReactNode