Grid

@sushindustries/ui

A responsive grid with no breakpoints in it. One number decides the column count at every width.

2 min read
View as Markdown

When to pin the count

<Grid columns={2}>
tsx

For content that is genuinely paired. A before and an after that reflow to one column stop being a comparison, so a pinned grid holds until the narrow breakpoint and then gives up all at once rather than degrading through an awkward middle.

If you find yourself pinning the count for anything else, min is the thing you actually wanted.

In Markdown

<!-- ::start:grid min="18rem" gap="4" -->

Anything at all, including other blocks.

<!-- ::end:grid -->

This exists because Markdown gives an author no way to say "these things go side by side". Without it the workaround is an HTML table, which then has to be undone at every width.

Spacing

gap is a step on the scale, not a pixel value. There is no arbitrary-value syntax here and that is deliberate: a short scale is what makes a set of sections look measured rather than assembled.