Skip to content
Theme UI

CSS Grid

CSS Grid Layout is a powerful way to handle complex two-dimensional layouts. Using Theme UI's sx prop gives you quick access to your space scale as well as a quick way to change styles responsively.

Use a wrapping <div> element with the sx prop to control the layout of direct child elements.

/** @jsxImportSource theme-ui */
export default (props) => (
display: 'grid',
gridGap: 4, //[4]
// use arrays for mobile-first responsive styles
gridTemplateColumns: [
'auto', // default to a stacked layout on small screens
'1fr 256px', // use columns for larger screens

See also: Grid component

Edit the page on GitHub
Flexbox Layout
Centered Container