Skip to content
EspañolEnglish
All components (204)

Grid

Layout · Grid · .amset-grid

What it is and when to use it

A grid that yields on its own: at most columns columns (1 to 6; by default, 2) and none narrower than min. If they do not fit, the extra ones wrap to the next row, without a single media query.

When to use it

  • Cards in a dashboard, products in a catalogue, the blocks of a summary: pieces of the same kind sharing the width.
  • min is the narrowest a column can get before the grid breaks (a CSS length: 14rem, 220px; by default, 12rem). gap goes from none to xl and comes from the spacing scale.
  • equalHeight (on by default) stretches the only piece in each cell to the height of its row: three cards in a row are equally tall even if each one sits inside its own wrapper. An image, a video, an svg, a canvas or an iframe are not stretched, because they would be distorted. With false, each cell is as tall as its content.
  • as renders the right element (section, article, nav…) instead of the div.

When not to

  • A single row or a single column with a gap: Stack.
  • Data in rows and columns that are compared with each other: Table. Name and value pairs: DataList.
  • Hundreds or thousands of items: VirtualList, because the grid renders them all.

Keyboard: it does not take part: it only lays out. The tab order is the order of the code, also when the columns wrap.

Accessibility: the grid yields by the width of the CONTAINER, not of the window: the same grid inside a narrow side panel breaks just as well as on a phone, and at 320 px wide it ends up in one column without overflowing to the right. It reorders nothing, so the screen reader and the Tab key go through the same thing you see. It adds no role: if the pieces are a list, the list is set by whoever renders them.

Fine-tuning: --amset-grid-cols (how many columns at most; set by columns), --amset-grid-min (12rem; min writes it inline) and --amset-grid-gap (set by gap).

What it looks like

OneTwoThree

<Grid columns={3} gap="md">
  <Tarjeta /> <Tarjeta /> <Tarjeta />
</Grid>

Props

Import it with import { Grid } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
childrenrequiredReactNode—
as"article" | "aside" | "div" | "footer" | "header" | "main" | "nav" | "section" | "span"—
classNamestringMerged with the library classes; it does not replace them.
columns3 | 4 | 2 | 5 | 1 | 6How many columns AT MOST. If they do not fit, they are stacked one below the other.
equalHeightbooleanWhether what goes in each cell fills the height of its row. Yes by default: three cards in a row are the same height even if each one sits inside a wrapper of its own (a list item, a link). With `false`, each cell is as tall as its content.
gap"sm" | "md" | "lg" | "none" | "xs" | "xl"—
minstringThe narrowest a column can get before the grid splits into fewer. A CSS length: `16rem`, `220px`.
styleCSSProperties—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

VariableDefault
--amset-grid-cols2
--amset-grid-min12rem
--amset-grid-gapvar(--amset-space-4)

How to change it

.amset-grid {
  --amset-grid-cols: ...;
  --amset-grid-min: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: