SimpleGrid

The simple grid is a layout component to build responsive interfaces.

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

Use the gap prop to increase or decrease the gap between columns.

To make it auto-responsive pass the minChildWidth prop to specify the min-width a child should have before adjusting the layout.

This uses css grid auto-fit and minmax() internally.

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

• children required
  Description The children elements

  Type

  ReactNode
• row
  Description The CSS `grid-row` property

  Type

  GridRow
• columns
  Description The number of columns

  Type

  ResponsiveValue<number>

  Default

  12
• column
  Description The CSS `grid-column` property

  Type

  GridColumn
• autoColumns
  Description The CSS `grid-auto-columns` property

  Type

  GridAutoColumns<string | number>
• autoFlow
  Description The CSS `grid-auto-flow` property

  Type

  GridAutoFlow
• autoRows
  Description The CSS `grid-auto-rows` property

  Type

  GridAutoRows<string | number>
• gapX
  Description The column gap between the grid items

  Type

  "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | ... 6 more ...

  Default

  4
• gapY
  Description The row gap between the grid items

  Type

  "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | ... 6 more ...

  Default

  4
• templateColumns
  Description The CSS `grid-template-columns` property

  Type

  GridTemplateColumns<string | number>
• templateRows
  Description The CSS `grid-template-rows` property

  Type

  GridTemplateRows<string | number>
• minChildWidth
  Description The width at which child elements will break into columns.

  Type

  string