Skip to content
Theme UI
GitHub
Recipes / Centered Container

Centered Container

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

Centered

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

// example theme
export default {
sizes: {
container: 768,
}
}
/** @jsx jsx */
import { jsx } from 'theme-ui'
// example Container component
export default props =>
<div
{...props}
sx={{
maxWidth: 'container',
mx: 'auto',
px: 3,
}}
/>
Edit the page on GitHub
Previous:
CSS Grid
Next:
Tiled Layout