Skip to content
Theme UI
GitHub
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

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>
Edit the page on GitHub
Previous:
Flexbox Layout
Next:
Centered Container