Skip to content
Theme UI
GitHub

Centered Container

Create a centered, max-width container for reuse in multiple layouts.

<div
sx={{
maxWidth: 512,
mx: 'auto',
px: 3,
py: 4,
}}>
Centered
</div>

First, add a container size to your theme, then use the size in your component definition.

// example theme
export default {
sizes: {
container: 768,
},
}
/** @jsxImportSource theme-ui */
// example Container component
export default (props) => (
<div
{...props}
sx={{
maxWidth: 'container',
mx: 'auto',
px: 3,
}}
/>
)

See also: Container component

Edit the page on GitHub
Previous:
CSS Grid
Next:
Tiled Layout