Auto Grid
Equal-width cells that pick their column count from the available width: as many as fit at a minimum width, with no breakpoints.Card gallery
Preview
Code
AtlasNorth region
12
active sitesBeaconCoast region
8
active sitesCompassDelta region
15
active sitesDeltaHills region
4
active sitesEchoCapital region
21
active sitesInstallation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { AutoGrid, Card } from '@advui/core'
<AutoGrid minChildWidth={240} gap="4" maxColumns={4}>
{items.map((item) => <Card key={item.id}>…</Card>)}
</AutoGrid>API reference
AutoGrid
Each child is one cell. Cells are equal width and fill the row; a lone child stays one column wide. It takes View style props and is full width by default.| Prop | Type | Default | Description |
|---|---|---|---|
minChildWidth | number | 240 | Narrowest a cell gets, in px. Columns = how many fit with the gaps, so a 1000px grid with 240px cells and `4` gaps has 3. A grid narrower than this has one column, as wide as the grid. |
maxColumns | number | — | Most columns, however wide the grid gets. Default: no limit. |
gap | SpaceTokens | '4' | Space between cells, across and down. |
autoGridColumns(width, minChildWidth, gap?, maxColumns?)
The column count for a width, in px, the same one the grid picks, for example to render the right number of skeleton cells.Accessibility
- Purely visual: AutoGrid adds no role. For a list of items, give it
role="list"and each cardrole="listitem". - Cells flow in source order, left to right then down, so reading order matches what is seen.
Responsive behavior
No breakpoints: the column count follows the grid’s own width, so the same grid works full width or in a narrow sidebar. Use Grid when the counts should change at set breakpoints.
Platform notes
Web
CSS grid,
repeat(auto-fill, minmax(…)), the one place Adv UI uses it: it is the only way to get the column count right on the first paint and in server-rendered HTML without measuring.iOS
No CSS grid in React Native: the grid measures its width with
onLayout and lays cells out in a wrapping row of equal widths, with the same column count as web. It shows one column until the first layout.Android
No CSS grid in React Native: the grid measures its width with
onLayout and lays cells out in a wrapping row of equal widths, with the same column count as web. It shows one column until the first layout.