SimpleGrid
SimpleGrid
SimpleGrid는 반응형 그리드 레이아웃을 쉽게 만들 수 있는 친숙한 인터페이스를 제공해요. 복잡한 그리드 설정 없이 열 수와 간격만으로 레이아웃을 잡을 수 있어요.
출처: 문서
본문
사용법 (Usage)
SimpleGrid 컴포넌트를 사용하면 반응형 그리드 레이아웃을 쉽게 만들 수 있어요.
import { SimpleGrid } from "@chakra-ui/react"
<SimpleGrid>
<Box />
<Box />
</SimpleGrid>
예시 (Examples)
열 (Columns)
columns prop을 사용해 그리드 레이아웃의 열 수를 지정할 수 있어요.
자동 반응형 (Auto-responsive)
minChildWidth prop을 사용해 열 수를 전달하지 않고도 그리드를 반응형으로 만들어 자동으로 조정할 수 있어요. 내부적으로 CSS 그리드의 auto-fit과 minmax()를 사용해요.
열 스팬 (Column Span)
colSpan prop을 사용해 열의 크기를 지정할 수 있어요.
행·열 간격 (Row and Column Gap)
rowGap과 columnGap props를 전달해 그리드 항목 사이의 행·열 간격을 바꿀 수 있어요.