그리드

그리드 (Grid)

그리드(grid) 레이아웃을 만들기 위한 컴포넌트예요. div 요소 기반으로 만들어졌어요.

출처: 문서

본문

그리드 레이아웃을 만드는 컴포넌트예요.

<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">
  <DecorativeBox />

  <DecorativeBox />

  <DecorativeBox />

  <DecorativeBox />

  <DecorativeBox />

  <DecorativeBox />
</Grid>

API Reference

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

그리드 레이아웃을 만들려면 이 props를 사용해요.

Prop	Type	Default
`as`	`"div" \| "span"`	`"div"`
`asChild`	`boolean`	No default value
`display`	`Responsive<"none" \| "inline-grid" \| "grid">`	No default value
`areas`	`Responsive<string>`	No default value
`columns`	`Responsive<enum \| string>`	No default value
`rows`	`Responsive<enum \| string>`	No default value
`flow`	`Responsive<enum>`	No default value
`align`	`Responsive<enum>`	No default value
`justify`	`Responsive<"start" \| "center" \| "end" \| "between">`	No default value
`alignContent`	`Responsive<enum>`	No default value
`justifyItems`	`Responsive<enum>`	No default value
`gap`	`Responsive<enum \| string>`	No default value
`gapX`	`Responsive<enum \| string>`	No default value
`gapY`	`Responsive<enum \| string>`	No default value

다음 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

예제 (Examples)

Responsive

columns, rows처럼 Responsive로 표시된 모든 props는 breakpoint 객체를 받아요. 예를 들어, 다음 그리드는 1개 열에서 시작해 medium breakpoint부터는 2개 열을 사용해요.

<Grid columns={{ initial: "1", md: "2" }} gap="3" width="auto">
  <Box height="64px">
    <DecorativeBox />
  </Box>

  <Box height="64px">
    <DecorativeBox />
  </Box>
</Grid>

더 알아보기 (Learn more)

Flex 컴포넌트 — 플렉스 레이아웃
breakpoints 테마 — 반응형 설정 살펴보기