Grid

Import

import { Grid } from "pier-ui";

Grid

<Grid
  columns="1fr 1fr 1fr 1fr 1fr 1fr"
  columnGap="10px"
  height="90px"
  rows="90px auto 10px"
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</Grid>

<Grid
  columns="1fr 1fr 1fr 1fr"
  columnGap="10px"
  rows="90px auto 10px"
  rowGap="6px"
  className="my-custom-class"
  height="90px"
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</Grid>

Media Queries

<Grid
  columns="1fr"
  columnGap="10px"
  rows="1fr 1fr 1fr 1fr"
  rowGap="30px"
  className="my-custom-class"
  height="140px"
  xs={{
    columns: "1fr 1fr",
    height: "140px",
    rows: "30px 30px",
    rowGap: "30px",
  }}
  md={{
    columns: "1fr 1fr 1fr",
    height: "140px",
    rows: "30px 30px",
    rowGap: "30px",
  }}
  lg={{
    columns: "1fr 1fr 1fr 1fr",
    columnGap: "50px",
    rows: "50px 10px",
  }}
>
  <div style={{ backgroundColor: "peachpuff" }}></div>
  <div style={{ backgroundColor: "palegreen" }}></div>
  <div style={{ backgroundColor: "peachpuff" }}></div>
  <div style={{ backgroundColor: "palegreen" }}></div>
</Grid>

Props

Prop	Description	Type	Default
`className`	className for the component	`string`
`bgColor`	background color for the component	`string`
`maxWidth`	maxWidth of the container	`string`	`auto`
`as`	You can use a custom element type for this component.	`elementType`	`div`
`columns`	css grid: grid-template-columns	`string`
`autoColumns`	css grid: grid-auto-columns	`string`
`rows`	css grid: grid-template-rows	`string`
`rowGap`	grid-row-gap	`string`
`autoRows`	grid-auto-rows	`string`
`areas`	grid-template-areas	`string`
`autoFlow`	grid-auto-flow	`string`
`height`	height of the grid	`string`
`xs`	Grid property for breakpoint min. xs	`object`
`md`	Grid property for breakpoint min. md	`object`
`lg`	Grid property for breakpoint min. lg	`object`
`xl`	Grid property for breakpoint min. xl	`object`

Documentation

Grid

Import

Grid

Media Queries

Props