Grid

The Grid component is useful for creating intrinsicly responsive layouts. Grid Design Guidelines.

Item 1

Item 2

Item 3

Item 4

Edit the code below to see your changes live!

<Grid>
  <Grid.Item>
    <ExampleBox>Item 1</ExampleBox>
  </Grid.Item>
  <Grid.Item>
    <ExampleBox>Item 2</ExampleBox>
  </Grid.Item>
  <Grid.Item>
    <ExampleBox>Item 3</ExampleBox>
  </Grid.Item>
  <Grid.Item>
    <ExampleBox>Item 4</ExampleBox>
  </Grid.Item>
</Grid>

<Grid>
  <Grid.Item>
    <ExampleBox>Item 1</ExampleBox>
  </Grid.Item>
  <Grid.Item>
    <ExampleBox>Item 2</ExampleBox>
  </Grid.Item>
  <Grid.Item>
    <ExampleBox>Item 3</ExampleBox>
  </Grid.Item>
  <Grid.Item>
    <ExampleBox>Item 4</ExampleBox>
  </Grid.Item>
</Grid>

API

Grid

Prop Name	Type	Description
`gridAreas`	`string`	Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property of a grid item. Same as the `grid-template-areas` CSS property.
`gridAutoColumns`	`string`	Specifies the size of any auto-generated column grid tracks. Same as the `grid-auto-columns` CSS property.
`gridAutoFlow`	`row` \| `column` \| `dense` \| `row dense` \| `column dense` \| `inherit` \| `initial` \| `unset`	Controls how auto placement of grid items work. Same as the `grid-auto-flow` CSS property.
`gridAutoRows`	`string`	Specifies the size of any auto-generated row grid tracks. Same as the `grid-auto-rows` CSS property.
`gridColumns`	`string`	Defines the columns of the grid with a space-separated list of values. Same as the `grid-template-columns` CSS property.
`gridGap`	`string`	Controls the spacing between grid items. Same as the `grid-gap` CSS property.
`gridRows`	`string`	Defines the rows of the grid with a space-separated list of values. Same as the `grid-template-rows` CSS property.
`gridTemplate`	`string`	Shorthand for `grid-template-columns`, `grid-template-rows`, and `grid-template-areas`. Same as the `grid-template` CSS property.

Props ending with * are required

Grid.Item

Prop Name	Type	Description
`gridArea`	`string`	Gives a grid item and area defined via `grid-template-areas`. Same as the `grid-area` CSS property.
`gridColumn`	`string`	Shorthand for `grid-column-start` and `grid-column-end`. Same as the `grid-column` CSS property.
`gridColumnEnd`	`string`	Determines a grid item's location within the grid by referring to specific grid lines. Same as the `grid-column-end` CSS property.
`gridColumnStart`	`string`	Determines a grid item's location within the grid by referring to specific grid lines. Same as the `grid-column-start` CSS property.
`gridRow`	`string`	Shorthand for `grid-row-start` and `grid-row-end`. Same as the `grid-row` CSS property.
`gridRowEnd`	`string`	Determines a grid item's location within the grid by referring to specific grid lines. Same as the `grid-row-end` CSS property.
`gridRowStart`	`string`	Determines a grid item's location within the grid by referring to specific grid lines. Same as the `grid-row-start` CSS property.

Props ending with * are required

Inherited Props

Box Props

Display Props

Margin Props

Padding Props

Examples

Grid allows you to create custom layouts using combinations of gridTemplate and gridArea props.

Header

Sidebar

Content

Footer

Edit the code below to see your changes live!

function Example() {
  const template = `
    "head head" 80px
    "nav  main" 200px
    "foot  foot" 50px
    / 1fr 5fr;
  `;

  return (
    <Grid gridTemplate={template}>
      <Grid.Item gridArea="head">
        <ExampleBox>Header</ExampleBox>
      </Grid.Item>
      <Grid.Item gridArea="nav">
        <ExampleBox>Sidebar</ExampleBox>
      </Grid.Item>
      <Grid.Item gridArea="main">
        <ExampleBox>Content</ExampleBox>
      </Grid.Item>
      <Grid.Item gridArea="foot">
        <ExampleBox>Footer</ExampleBox>
      </Grid.Item>
    </Grid>
  );
}

function Example() {
  const template = `
    "head head" 80px
    "nav  main" 200px
    "foot  foot" 50px
    / 1fr 5fr;
  `;
  return (
    <Grid gridTemplate={template}>
      <Grid.Item gridArea="head">
        <ExampleBox>Header</ExampleBox>
      </Grid.Item>
      <Grid.Item gridArea="nav">
        <ExampleBox>Sidebar</ExampleBox>
      </Grid.Item>
      <Grid.Item gridArea="main">
        <ExampleBox>Content</ExampleBox>
      </Grid.Item>
      <Grid.Item gridArea="foot">
        <ExampleBox>Footer</ExampleBox>
      </Grid.Item>
    </Grid>
  );
}

You can use the gridColumns prop to create columned layouts.

Reprehenderit ullamco et elit eu duis non reprehenderit eiusmod pariatur ea deserunt irure. Reprehenderit et incididunt sit aute sint proident eu eiusmod pariatur Lorem nulla labore irure nisi. Adipisicing do duis occaecat ipsum dolor ea. Qui consectetur sint eu nulla duis et commodo anim commodo. Ullamco consectetur elit ullamco aliquip do id consectetur anim laborum.

In sit dolore culpa reprehenderit tempor laborum. Sit anim voluptate pariatur irure amet mollit. Est mollit ad pariatur esse eu reprehenderit ut veniam. Aliquip anim mollit aliquip quis officia minim esse laboris proident fugiat cillum. Eiusmod culpa eu ea eiusmod nostrud.

Ipsum adipisicing pariatur magna quis incididunt amet pariatur. Aliqua voluptate consequat ut elit ea dolore officia reprehenderit exercitation dolore eiusmod cupidatat quis. Ullamco ipsum do deserunt sunt ad deserunt ut. Elit non velit dolore ad est eu.

Edit the code below to see your changes live!

<Grid gridColumns="repeat(3, 1fr)">
  <Grid.Item>
    <ExampleBox>
      Reprehenderit ullamco et elit eu duis non reprehenderit eiusmod pariatur ea deserunt irure. Reprehenderit et
      incididunt sit aute sint proident eu eiusmod pariatur Lorem nulla labore irure nisi. Adipisicing do duis
      occaecat ipsum dolor ea. Qui consectetur sint eu nulla duis et commodo anim commodo. Ullamco consectetur
      elit ullamco aliquip do id consectetur anim laborum.
    </ExampleBox>
  </Grid.Item>

  <Grid.Item>
    <ExampleBox>
      In sit dolore culpa reprehenderit tempor laborum. Sit anim voluptate pariatur irure amet mollit. Est mollit
      ad pariatur esse eu reprehenderit ut veniam. Aliquip anim mollit aliquip quis officia minim esse laboris
      proident fugiat cillum. Eiusmod culpa eu ea eiusmod nostrud.
    </ExampleBox>
  </Grid.Item>

  <Grid.Item>
    <ExampleBox>
      Ipsum adipisicing pariatur magna quis incididunt amet pariatur. Aliqua voluptate consequat ut elit ea dolore
      officia reprehenderit exercitation dolore eiusmod cupidatat quis. Ullamco ipsum do deserunt sunt ad deserunt
      ut. Elit non velit dolore ad est eu.
    </ExampleBox>
  </Grid.Item>
</Grid>

<Grid gridColumns="repeat(3, 1fr)">
  <Grid.Item>
    <ExampleBox>
      Reprehenderit ullamco et elit eu duis non reprehenderit eiusmod pariatur ea deserunt irure. Reprehenderit et
      incididunt sit aute sint proident eu eiusmod pariatur Lorem nulla labore irure nisi. Adipisicing do duis
      occaecat ipsum dolor ea. Qui consectetur sint eu nulla duis et commodo anim commodo. Ullamco consectetur
      elit ullamco aliquip do id consectetur anim laborum.
    </ExampleBox>
  </Grid.Item>
  <Grid.Item>
    <ExampleBox>
      In sit dolore culpa reprehenderit tempor laborum. Sit anim voluptate pariatur irure amet mollit. Est mollit
      ad pariatur esse eu reprehenderit ut veniam. Aliquip anim mollit aliquip quis officia minim esse laboris
      proident fugiat cillum. Eiusmod culpa eu ea eiusmod nostrud.
    </ExampleBox>
  </Grid.Item>
  <Grid.Item>
    <ExampleBox>
      Ipsum adipisicing pariatur magna quis incididunt amet pariatur. Aliqua voluptate consequat ut elit ea dolore
      officia reprehenderit exercitation dolore eiusmod cupidatat quis. Ullamco ipsum do deserunt sunt ad deserunt
      ut. Elit non velit dolore ad est eu.
    </ExampleBox>
  </Grid.Item>
</Grid>

Beta