Adv UI

Grid

Responsive columns with spans and offsets, such as 12-column 8 / 4 layouts, identical on web and native.
Stable
Web
iOS
Android
@advui/core
Source
span full
span 2
1
2
3
4
JSX
<Grid>
  <Grid.Item span="full">…</Grid.Item>
  <Grid.Item span={2}>…</Grid.Item>
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
  <Box>4</Box>
</Grid>
PropsOpen in Playground
gap
alignItems

Installation

pnpm
pnpm add @advui/core
npm
npm install @advui/core

Usage

import { Grid } from '@advui/core'

<Grid columns={12} gap="4">
  <Grid.Item span={{ base: 12, md: 8 }}>…main…</Grid.Item>
  <Grid.Item span={{ base: 12, md: 4 }}>…side…</Grid.Item>
</Grid>

// Equal columns: plain children are one column each
<Grid columns={{ base: 1, sm: 2, lg: 4 }} gap="4">
  {items.map((item) => <Card key={item.id}>…</Card>)}
</Grid>

Examples

Two columns (8 / 4)

Main content and a side panel from md; stacked on phones.
Sprint progress8 of 12 columns from md, the full row on phones.
Design review80%
Accessibility audit45%
Release notes20%
Details4 of 12 columns from md.
Status
On track
DueFriday

Sidebar (3 / 9)

Section links beside the content from md; above it on phones.
OverviewA 3 / 9 split from md. On phones the sections sit above the content.
The sidebar covers 3 of 12 columns and the content the other 9.

Responsive cards

One column on phones, two from sm and three from lg, with plain children.
AtlasMaps and place codes
BeaconAlerts for field teams
CompassPartner directory
DeltaSurvey imports
EchoFeedback inbox
FjordData warehouse

Offset

Empty columns before a cell: centered from md, or pushed to the end.
md: span 6, offset 3
span 4, offset 8
span 4
span 4, offset 4

Responsive stats

Revenue$45,231
Subscriptions+2,350
Sales+12,234
Active now573

API reference

Grid

A row of columns that wraps. Each child is a cell: a `Grid.Item`, or any other element in a one-column cell. Takes View style props.
PropTypeDefaultDescription
columnsnumberor a breakpoint map1Column count, optionally per breakpoint (mobile-first: a missing breakpoint inherits the nearest smaller one).
gapSpaceTokens'4'Gap between cells.
rowGapSpaceTokens—Gap between rows. Defaults to `gap`.
columnGapSpaceTokens—Gap between columns. Defaults to `gap`. It is padding inside each cell, so it never changes a cell’s share of the row.
alignItems'stretch' | 'flex-start' | 'center' | 'flex-end' | 'baseline''stretch'Cross-axis alignment of the cells in a row. `stretch` makes cells in a row the same height.

Grid.Item

One cell (also exported as `GridItem`), since 0.7.0. It is the cell itself, with no extra wrapper, so its horizontal padding is the column gap: put backgrounds, borders and padding on a child. Cells in a row share its height; give the child `flexGrow={1}` to fill it. Takes View style props.
PropTypeDefaultDescription
spannumber | 'full' | 'auto'or a breakpoint map1Columns to cover, optionally per breakpoint (mobile-first). A map without `base` covers the full row below its first breakpoint, like Bootstrap: `{ md: 8 }` stacks on phones. `'full'` covers every column at that breakpoint, `'auto'` sizes to the content (capped at the row). Clamped to 1 – `columns`.
offsetnumberor a breakpoint map0Empty columns before the cell, optionally per breakpoint. Applied as `marginInlineStart`, so it mirrors in right-to-left layouts. Clamped so the cell still fits its row.

From Bootstrap

Bootstrap’s 12-column grid maps to <Grid columns={12}>, and a span map without base is full width below its first breakpoint, as a Bootstrap column is.

BootstrapAdv UINotes
.row<Grid columns={12}>A Grid has 1 column unless you set columns.
.col-8<Grid.Item span={8}>At every width.
.col-md-8<Grid.Item span={{ md: 8 }}>Full width below md.
.col-6 .col-md-8 .col-lg-6span={{ base: 6, md: 8, lg: 6 }}Mobile-first; set base for phones.
.col-autospan="auto"Content width, capped at the row.
.col (equal widths)Plain children in <Grid columns={3}>Set columns to the number of cells per row.
.row-cols-1 .row-cols-md-3<Grid columns={{ base: 1, md: 3 }}>No Grid.Item needed.
.offset-md-2offset={{ md: 2 }}Mirrors in right-to-left layouts.
.g-3 (1rem)gap="4" (16px).g-1 → 1, .g-2 → 2, .g-4 → 6, .g-5 → 12.
.gx-* / .gy-*columnGap / rowGapBoth default to gap.
.align-items-center on .row<Grid alignItems="center">
.order-*Not supportedReact Native has no order, and reordering would break reading order. Change the source order.

Accessibility

  • Purely visual: Grid and Grid.Item add no roles.
  • Reading order follows source order on every platform. Offsets only add space, and there is no order prop, so what you see matches what screen readers read.

Responsive behavior

columns, span and offset take a number or a mobile-first map { base, xs, sm, md, lg, xl, xxl } (from 460, 640, 768, 1024, 1280 and 1536 px). A missing breakpoint inherits the nearest smaller one. A missing base is the prop’s default (columns 1, offset 0), except in a span map, where it is the full row, as in Bootstrap. At each breakpoint a cell is min(span, columns) / columns of the row, and only the breakpoints where that changes are emitted. They compile to CSS media queries on web (SSR-safe) and to window-size checks on native.

Platform notes

Web
Flex-wrap with percentage widths, not CSS grid: Tamagui’s CSS-grid props (gridTemplateColumns, gridColumn) are web-only and dropped on native, and display: grid does not exist there, so one flex layout keeps web, iOS and Android identical. Offsets use margin-inline-start.
iOS
Identical to web: the same flex-wrap and percentage widths, laid out by Yoga. Offsets use marginStart, mirrored in right-to-left layouts.
Android
Identical to web: the same flex-wrap and percentage widths, laid out by Yoga. Offsets use marginStart, mirrored in right-to-left layouts.

Related components

Stack
Container
Since v0.1.0Last updated Nov 2, 2026Edit this page on GitHub
PreviousContainer
NextScroll Area