Tiled Layout
Create a responsive auto-sized tiled layout using CSS Grid.
<divsx={{display: 'grid',gridGap: 3,gridTemplateColumns: `repeat(auto-fit, minmax(128px, 1fr))`,}}><div>One</div><div>Two</div><div>Three</div><div>Four</div></div>
/** @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