Skip to content
Theme UI
GitHub

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>

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

Edit the page on GitHub
Previous:
Flexbox Layout
Next:
Centered Container