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.

<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.

/** @jsxImportSource 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>
)

See also: Grid component