Grid

Grid (그리드)

그리드 레이아웃을 관리할 때 사용하는 컴포넌트예요. 요소들을 행과 열로 배치하는 데 유용해요.

출처: 문서

본문

사용법 (Usage)

import { Grid, GridItem } from "@chakra-ui/react"
<Grid>
  <GridItem />
  <GridItem />
</Grid>

예제 (Examples)

열 확장 (Col Span)

GridItem에 colSpan prop을 넘겨서 여러 열에 걸쳐 확장할 수 있어요.

| 예제 (grid-with-col-span) |

열 걸쳐 확장 (Spanning Columns)

일부 레이아웃에서는 특정 그리드 항목이 균등하게 배분되는 대신 특정 수의 열이나 행에 걸쳐 확장해야 할 수도 있어요.

| 예제 (grid-spanning-columns) |

Props

| PropTable (Grid / Grid) |

더 알아보기 (Learn more)