Container

Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid.

View source@chakra-ui/layout

Import

import { Container } from "@chakra-ui/react";

Usage

To contain any piece of content, wrap it in the Container component.

<Container> There are many benefits to a joint design and development system. Not only does it bring benefits to the design team, but it also brings benefits to engineering teams. It makes sure that our experiences have a consistent look and feel, not just in our design specs, but in production </Container>

<Container>
  There are many benefits to a joint design and development system. Not only
  does it bring benefits to the design team, but it also brings benefits to
  engineering teams. It makes sure that our experiences have a consistent look
  and feel, not just in our design specs, but in production
</Container>

Container Size

By default, the Container component sets the maxWidth of the content to 60 characters (60ch) but you can customize this by passing custom maxWidth values or changing the size tokens defined in theme.sizes.container.

• About the default value: The ch unit is a relative unit defined by the rendered typeface's "0" character width. This width varies by the shape and style of the font.
• If you are curious about the reason for this default value of 60 characters, consider this explanation about line length from Better Web Type.

<VStack> <Container maxW="md" bg="blue.600" color="white"> "md" Container </Container> <Container maxW="550px" bg="purple.600" color="white"> "550px" Container </Container> <Container maxW="container.sm" bg="green.400" color="#262626"> "container.sm" Container </Container> </VStack>

<VStack>
  <Container maxW="md" bg="blue.600" color="white">
    "md" Container
  </Container>
  <Container maxW="550px" bg="purple.600" color="white">
    "550px" Container
  </Container>
  <Container maxW="container.sm" bg="green.400" color="#262626">
    "container.sm" Container
  </Container>
</VStack>

Centering the children

In some cases, the width of the content can be smaller than the container's width. You can use the centerContent prop to center the content. It renders a flexbox with flexDirection set to column and alignItems set to center.

<Container maxW="2xl" bg="blue.600" centerContent> <Box padding="4" bg="blue.400" color="black" maxW="md"> There are many benefits to a joint design and development system. Not only does it bring benefits to the design team, but it also brings benefits to engineering teams. It makes sure that our experiences have a consistent look and feel, not just in our design specs, but in production. </Box> </Container>

<Container maxW="2xl" bg="blue.600" centerContent>
  <Box padding="4" bg="blue.400" color="black" maxW="md">
    There are many benefits to a joint design and development system. Not only
    does it bring benefits to the design team, but it also brings benefits to
    engineering teams. It makes sure that our experiences have a consistent look
    and feel, not just in our design specs, but in production.
  </Box>
</Container>

Props

Container composes Box so you can pass all Box related props in addition to this.

centerContent

Description

If true, container will center its children regardless of their width.

Type

boolean

colorScheme

Description

Color Schemes for Container are not implemented in the default theme. You can extend the theme to implement them.

Type

string

size

Description

Sizes for Container are not implemented in the default theme. You can extend the theme to implement them.

Type

string

variant

Description

Variants for Container are not implemented in the default theme. You can extend the theme to implement them.

Type

string