Grid
유연하고 강력한 CSS Grid 기반의 레이아웃 컴포넌트입니다Property
Template
Grid의 행과 열 템플릿을 설정하여 레이아웃 구조를 정의할 수 있습니다.
Flow
Grid 아이템들의 자동 배치 방향을 설정할 수 있습니다.
Inline
Grid를 인라인 요소로 표시할 수 있습니다.
Span
Grid 아이템이 차지할 행이나 열의 개수를 설정할 수 있습니다.
Examples
Layout Patterns
일반적인 레이아웃 패턴들을 Grid로 구현할 수 있습니다.
Props Table
Grid.Root
Root of the Grid compound component, a container that lays out its children in rows and columns with CSS grid. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
flow? | row | rowcolumnrow-densecolumn-dense |
className? | - | stringfunction |
inline? | - | boolean |
style? | - | React.CSSPropertiesfunction |
templateColumns? | - | string |
templateRows? | - | string |
render? | - | ReactElementfunction |
Grid.Item
Item inside Grid.Root that can be placed across or span several rows and columns. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
colSpan? | - | string |
rowSpan? | - | string |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |