Container

Usage

Container is the most basic layout element, it centers content horizontally and add horizontal padding from theme. Component accepts these props:

• size – controls default max width
• padding – controls horizontal padding of container, use xs, sm, md, lg, xl for value defined in theme.spacing or number to set horizontal padding in px
• fluid – overwrites size prop and sets max width to 100%

<Container>
  Default container
</Container>

<Container size="xs" padding="xs">
  xs container with xs horizontal padding
</Container>

<Container size={200} padding={0}>
  200px container with 0 horizontal padding
</Container>

Default sizes

You can get predefined max-width values by importing CONTAINER_SIZES:

import { CONTAINER_SIZES } from '@mantine/core';