Grid

Grid는 자식을 열로 배치합니다. 고정 columns를 쓰거나, Foundation 크기와 함께 minItem으로 유동 auto-fit 그리드를 만드세요.

1

2

3

4

5

6

계약

Overview

Machine-readable contract from Component Spec.

component: gridexport: Gridversion: 1attributes: data-refineui=grid

Anatomy

Part	data-refineui
root	grid
item	grid-item

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Grid, GridItem } from "@refineui/react";

<Grid columns={3} gap="sizeMedium">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Grid>

<Grid minItem="foundationSize2560" gap="sizeLarge">
  <GridItem>Card</GridItem>
  <GridItem>Card</GridItem>
</Grid>

API 레퍼런스

Grid

Prop	Default	Type	Description
as	"div"	ElementType	루트 요소.
columns	1	number	동일 열 개수(`minItem` 설정 시 무시).
minItem	—	Foundation size name	auto-fit 최소 트랙 크기.
gap	"sizeNone"	Spacing token	행·열 gap.
columnGap	—	Spacing token	열 gap 재정의.
rowGap	—	Spacing token	행 gap 재정의.
align	—	Align token	아이템 정렬.
justify	—	Justify token	콘텐츠 justify.

GridItem

Prop	Default	Type	Description
span	1	number	열 span.
rowSpan	—	number	행 span.