Skip to content
Theme UI
GitHub
Recipes / Tiled Layout

Tiled Layout

Create a responsive auto-sized tiled layout using CSS Grid.

One
Two
Three
Four
/** @jsx jsx */
import { jsx } from 'theme-ui'
export default ({
gap = 3,
width = 128,
...props
}) =>
<div
{...props}
sx={{
display: 'grid',
gridGap: gap,
gridTemplateColumns: `repeat(auto-fit, minmax(${width}px, 1fr))`,
}}
/>
Edit the page on GitHub
Previous:
Centered Container
Next:
Stack Layout