Grid

One to twelve equal-width columns with role-based row and column gaps.@gemologic/sheen · layout

Playground

columns

gap

align

First name

Last name

<Grid columns={2} align="stretch" columns={1} gap="md"><Input label="First name" /><Input label="Last name" /></Grid>

Variant matrix

Grid composition

First name

Last name

columns: 1

First name

Last name

columns: 2

First name

Last name

columns: 3

First name

Last name

columns: 4

First name

Last name

columns: 5

First name

Last name

columns: 6

First name

Last name

columns: 7

First name

Last name

columns: 8

First name

Last name

columns: 9

First name

Last name

columns: 10

First name

Last name

columns: 11

First name

Last name

columns: 12

First name

Last name

gap: none

First name

Last name

gap: xs

First name

Last name

gap: sm

First name

Last name

gap: md

First name

Last name

gap: lg

First name

Last name

gap: xl

First name

Last name

align: start

First name

Last name

align: center

First name

Last name

align: end

First name

Last name

align: stretch

First name

Last name

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/layout/Layout.tsx

Tokens

--sheen-space-block-md
--sheen-space-inline-md

Accessibility

Role: presentation layoutKeyboard: No component-owned keys

Do

Preserve logical DOM order and use token spacing.

Do not

Do not use layout wrappers to invent inaccessible keyboard order.

Generated props

Name	Type	Default	Description
`columns`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12`	`1`	Equal-width tracks with shrinkable minmax sizing.
`gap`	`Spacing`	`md`	Role-based spacing that follows the active density.
`align`	`Alignment`	`stretch`	Cross-axis alignment without changing DOM or keyboard order.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.