Skip to content
Theme UI
GitHub

Stack Layout

Add vertical space between child elements using CSS Grid.

<div
sx={{
display: 'grid',
gridGap: 4,
}}>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
/** @jsxImportSource theme-ui */
export default function Stack({ gap = 4, ...props }) => (
<div
{...props}
sx={{
display: 'grid',
gridGap: gap,
}}
/>
)

See also: Grid component

Edit the page on GitHub
Previous:
Tiled Layout
Next:
Flexbox Sidebar