CSS Grid

Rebass components can be used to create one-off or reusable CSS Grid layout components. While the entirety of what's possible with CSS Grid is outside the scope of this guide, the following should demonstrate how to apply any CSS Grid layout using Rebass.

This guide is a work-in-progress. If you'd like to help make this better, please open an issue or pull request on GitHub.

CSS Grid is great for arranging direct child elements without the need for additional styles applied to the children. Create an extension of the Box component that can wrap other elements to apply a grid layout.

// example grid layout component
import React from 'react'
import { Box } from 'rebass'
export default props =>
  <Box
    {...props}
    sx={{
      display: 'grid',
      gridGap: 3,     // theme.space[3]
    }}
  />

By using the sx prop, CSS properties such as gridGap will use values from your theme object. This can help ensure consistent whitespace throughout your layout.

Auto Columns

Using the grid-auto-columns property, you can quickly lay out child elements in a tile-based grid.

// example grid layout component
import React from 'react'
import { Box } from 'rebass'
export default props =>
  <Box
    {...props}
    sx={{
      display: 'grid',
      gridGap: 3,     // theme.space[3]
      gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',
    }}
  />

Demo

Use the live demo below to explore different layouts using CSS Grid.

Hello

CSS Grid

<Box
  sx={{
    display: 'grid',
    gridGap: 4,
    gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',
  }}>
  <Heading p={3} bg='muted'>Hello</Heading>
  <Box p={3} color='background' bg='primary'>CSS Grid</Box>
</Box>

<Box
  sx={{
    display: 'grid',
    gridGap: 4,
    gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',
  }}>
  <Heading p={3} bg='muted'>Hello</Heading>
  <Box p={3} color='background' bg='primary'>CSS Grid</Box>
</Box>

Live Demo

Resources

There are many resources for learning how to use CSS Grid layout. To fully understand any API in CSS, I highly recommend reading the specification, since it is the authoritative source for how CSS is intended to work:

CSS Grid Layout Module Level 1

Once you have a basic grasp of the concepts in the specification, MDN is an excellent resource for learning any web technology:

MDN: CSS Grid Layout

Additional resources: