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
/** @jsxImportSource theme-ui */
export default ({ gap = 3, width = 128, ...props }) => (
<div
{...props}
sx={{
display: 'grid',
gridGap: gap,
gridTemplateColumns: `repeat(auto-fit, minmax(${width}px, 1fr))`,
}}
/>
)

See also: Grid component

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