Recipes / CSS Grid

CSS Grid

CSS Grid Layout is a powerful way to handle complex two-dimensional layouts. Using Theme UI's sx prop gives you quick access to your space scale as well as a quick way to change styles responsively.

Main

<div
  sx={{
    display: 'grid',
    gridGap: 4,
    gridTemplateColumns: [
      'auto',
      '1fr 256px'
    ]
  }}>
  <main>Main</main>
  <aside>Sidebar</aside>
</div>
<div
  sx={{
    display: 'grid',
    gridGap: 4,
    gridTemplateColumns: [
      'auto',
      '1fr 256px'
    ]
  }}>
  <main>Main</main>
  <aside>Sidebar</aside>
</div>

Use a wrapping <div> element with the sx prop to control the layout of direct child elements.

/** @jsx jsx */
import { jsx } from 'theme-ui'
export default props =>
  <div
    sx={{
      display: 'grid',
      gridGap: 4, // theme.space[4]
      // use arrays for mobile-first responsive styles
      gridTemplateColumns: [
        'auto', // default to a stacked layout on small screens
        '1fr 256px' // use columns for larger screens
      ]
    }}>
    <main>
      {props.children}
    </main>
    <div>
      Sidebar
    </div>
  </div>