If true
, container will center its children
regardless of their width.
Container
Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid.
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 onlydoes it bring benefits to the design team, but it also brings benefits toengineering teams. It makes sure that our experiences have a consistent lookand 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>
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 onlydoes it bring benefits to the design team, but it also brings benefits toengineering teams. It makes sure that our experiences have a consistent lookand 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
centerContent
boolean
colorScheme
colorScheme
Color Schemes for Container
are not implemented in the default theme. You can extend the theme to implement them.
(string & {})
size
size
Sizes for Container
are not implemented in the default theme. You can extend the theme to implement them.
string
variant
variant
Variants for Container
are not implemented in the default theme. You can extend the theme to implement them.
string