Grid

Grid places children in columns. Use fixed columns, or minItem with a Foundation size for fluid auto-fit grids.

1

2

3

4

5

6

Contract

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

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

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 Reference

Grid

Prop	Default	Type	Description
as	"div"	ElementType	Root element.
columns	1	number	Equal column count (ignored when `minItem` is set).
minItem	—	Foundation size name	Auto-fit min track size.
gap	"sizeNone"	Spacing token	Row and column gap.
columnGap	—	Spacing token	Column gap override.
rowGap	—	Spacing token	Row gap override.
align	—	Align token	Items alignment.
justify	—	Justify token	Content justification.

GridItem

Prop	Default	Type	Description
span	1	number	Column span.
rowSpan	—	number	Row span.