Grid

import { Card } from "@hel/ui/card"
import { Grid } from "@hel/ui/grid"
import { Heading } from "@hel/ui/heading"

When to use it#

Use a grid for things of the same kind that should line up in rows and columns: dashboard figures, product cards, a gallery of projects. Every cell is the same width, and rows form on their own as items are added.

For a single row or column where items have their own sizes, Flex and Stack are simpler.

Import#

Copyimport { Grid } from "@hel/ui/grid"

Two ways to set the columns#

A fixed number. columns takes 1 to 6 and always gives you that many equal columns, whatever the width. It suits a small set of items you know the count of, like the three figures above. The default is one column.

As many as fit. minItemSize ignores columns and fits as many columns as the width allows, none narrower than the size you pick, then lets them grow to fill the row. It reflows by itself, so there are no breakpoints to write.

Examples#

Cards that reflow#

Resize the window and watch the cards move from three columns to two to one. The last row is not stretched when there are leftover cards, since the columns keep their width.

import { Button } from "@hel/ui/button"
import { Card } from "@hel/ui/card"
import { Grid } from "@hel/ui/grid"

Reach for minItemSize for anything that should work on a phone and on a wide screen, and keep columns for places where the count is part of the design.

Gap and alignment#

gap is the space between cells on the same spacing scale as Flex, and it defaults to md. align sets how an item sits inside its cell: stretch (the default) makes every card as tall as the tallest one in its row, which is usually what you want, while start, center, end and baseline let each item keep its own height.

Props#

When minItemSize is set, columns is ignored. Grid takes every other prop of the element it renders.