Skip to content
Theme UI
GitHub
Recipes / Stack

Stack Layout

Add vertical space between child elements using CSS Grid.

One
Two
Three
Four
/** @jsxImportSource theme-ui */
export default ({ 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