컨테이너

컨테이너 (Container)

페이지 콘텐츠의 최대 너비를 제한해 주는 컴포넌트예요. 콘텐츠를 중앙에 두고 가독성 좋은 선 너비로 맞춰 줘요.

출처: 문서

본문

페이지 콘텐츠의 최대 너비를 제한해요.

<Box style={{ background: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}>
  <Container size="1">
    <DecorativeBox>
      <Box py="9" />
    </DecorativeBox>
  </Container>
</Box>

API Reference

이 컴포넌트는 div 요소를 기반으로 하며 공통 margin props를 지원해요.

Prop Type Default
asChild boolean No default value
size Responsive<"1" | "2" | "3" | "4"> "4"
display Responsive<"none" | "initial"> No default value
align Responsive<"left" | "center" | "right"> No default value

Container 크기는 다음 max-width 값을 사용하며, 필요하면 커스터마이즈할 수 있어요.

Size CSS variable Width
size="1" --container-1 448px
size="2" --container-2 688px
size="3" --container-3 880px
size="4" --container-4 1136px

다음 props는 Box, Flex, Grid, Container, Section 컴포넌트 간에 공유돼요. 레이아웃 컴포넌트에 대한 자세한 내용은 Layout에서 확인할 수 있어요.

Prop Type Default
p Responsive<enum | string> No default value
px Responsive<enum | string> No default value
py Responsive<enum | string> No default value
pt Responsive<enum | string> No default value
pr Responsive<enum | string> No default value
pb Responsive<enum | string> No default value
pl Responsive<enum | string> No default value
width Responsive<string> No default value
minWidth Responsive<string> No default value
maxWidth Responsive<string> No default value
height Responsive<string> No default value
minHeight Responsive<string> No default value
maxHeight Responsive<string> No default value
position Responsive<enum> No default value
inset Responsive<enum | string> No default value
top Responsive<enum | string> No default value
right Responsive<enum | string> No default value
bottom Responsive<enum | string> No default value
left Responsive<enum | string> No default value
overflow Responsive<enum> No default value
overflowX Responsive<enum> No default value
overflowY Responsive<enum> No default value
flexBasis Responsive<string> No default value
flexShrink Responsive<enum | string> No default value
flexGrow Responsive<enum | string> No default value
gridArea Responsive<string> No default value
gridColumn Responsive<string> No default value
gridColumnStart Responsive<string> No default value
gridColumnEnd Responsive<string> No default value
gridRow Responsive<string> No default value
gridRowStart Responsive<string> No default value
gridRowEnd Responsive<string> No default value
alignSelf Responsive<enum> No default value
justifySelf Responsive<enum> No default value

더 알아보기 (Learn more)