Container

콘텐츠의 너비를 현재 브레이크포인트에 맞게 제한하면서 유동적으로 유지하는 데 사용하는 컴포넌트예요.

출처: 문서

본문

기본 maxWidth는 8xl이며, 이는 90rem (1440px)에 해당해요.

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

<Container>
  <div />
</Container>

maxWidth prop을 사용하면 컨테이너의 크기를 바꿀 수 있어요.

fluid prop을 사용하면 컨테이너가 부모의 너비를 채우도록 늘어나게 할 수 있어요.

해당 컴포넌트에 전달할 수 있는 prop은 Container 컴포넌트의 Props 표를 확인해 주세요.

Chakra UI의 Container 컴포넌트에 대해 더 자세히 알아보려면 공식 문서를 확인해 보세요.