Grid · Glowup

Glowup

LAYOUT · 86 / 89

Grid

Grid — a Material You layout component for React Native and web.

󱀫

packages/ui/src/components/Layout/Grid.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

primary

secondary

tertiary

error

Properties

3 controls

Columns

Min Child Width (0 = off)

Spacing

Usage

Grid.tsx

Variants

The states and shapes this component is meant to be used in.

Fixed columns

Responsive

`minChildWidth` fits as many columns as the container allows.

Stat board

Revenue

€18,420

󰁝

12.5%

Orders

1,204

󰁝

9.2%

Refunds

󰁅

3.1%

Active seats

128

󰁔

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

3 on GridProps

Also accepts everything from Omit<BoxProps, "row" | "wrap" | "gap">.

columns

number

default: 2

Fixed column count. Ignored when `minChildWidth` is set.

minChildWidth

number

Responsive alternative to `columns`: fits as many columns of at least this width as the container allows.

spacing

SpacingValue

default: "s"

Gap between cells — a spacing token name or a raw value.