Skip to content

Latest commit

 

History

History
78 lines (62 loc) · 2.59 KB

container.md

File metadata and controls

78 lines (62 loc) · 2.59 KB
title description version
Container
Container component is used to constrain a content's width to the current breakpoint, while keeping it fluid.
2.0+

Container

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

Import

import { CContainer } from '@chakra-ui/vue-next'

Usage

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

::showcase ::simple-container :: ::

<CContainer>
    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
</CContainer>

Container Size

By default, the CContainer component sets the max-width of the content to 60 characters (60ch) but you can customize this by passing custom max-width values or changing the size tokens.

  • 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.

::showcase ::container-size :: ::

<CVStack w="2xl" align-items="center">
    <CContainer max-w='md' bg='blue.600' color='white'>
        "md" Container
    </CContainer>
    <CContainer max-w='550px' bg='purple.600' color='white'>
        "550px" Container
    </CContainer>
    <CContainer max-w='container.sm' bg='green.400' color='#262626'>
        "container.sm" Container
    </CContainer>
</CVStack>

Centering the children

In some cases, the width of the content can be smaller than the container's width. You can use the center-content prop to center the content. It renders a flexbox with flex-direction set to column and align-items set to center. ::showcase ::container-center ::

<CContainer max-w='2xl' bg='blue.600' center-content>
    <CBox padding='4' bg='blue.400' color='black' max-w='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.
    </CBox>
</CContainer>