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>
<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,
  }
}

/** @jsx jsx */
import { jsx } from 'theme-ui'
// example Container component
export default props =>
  <div
    {...props}
    sx={{
      maxWidth: 'container',
      mx: 'auto',
      px: 3,
    }}
  />

See also: Container component