Grid

.grid is an intrinsically responsive wrapping grid: columns follow available space, wrapping onto a new row once children no longer fit at the minimum column width. Resize the window on the demo below — columns appear and disappear on their own, no breakpoint involved. For a grid that stays on one row regardless of item count, see Row.

<div class="grid">
  <article>Card one</article>
  <article>Card two</article>
  <article>Card three</article>
  <article>Card four</article>
  <article>Card five</article>
  <article>Card six</article>
</div>

<div class="grid">
  <article>Card one</article>
  <article>Card two</article>
  <article>Card three</article>
  <article>Card four</article>
  <article>Card five</article>
  <article>Card six</article>
</div>

.row vs .grid #

Both are single-declaration, class-only layouts with no per-column markup — the difference is what happens when there are more items than fit comfortably on one row:

Behavior #

• grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cirth-grid-min-column)), 1fr)). Each column is at least --cirth-grid-min-column wide (default 12rem) and grows evenly to fill any remaining space; once a row can't fit another column at that minimum, children wrap onto the next row.
• min(100%, var(--cirth-grid-min-column)) caps the minimum at the container's own width, so a single child — or a very narrow viewport — gets one full-width column instead of overflowing. No media query is needed for the narrow case; it falls out of the min() for free.
• Gaps are controlled by --cirth-grid-column-gap and --cirth-grid-row-gap (both default to --cirth-spacing).
• Children get min-width: 0 so long content (text, tables) doesn't force a column wider than its track.
• A form control (input, select, textarea, button, …) that is a direct child of .grid drops its own margin-bottom — the row-gap already provides that rhythm (upstream pico#738).

Tune --cirth-grid-min-column per grid to change how eagerly it wraps — a smaller value packs in more, narrower columns; a larger one wraps sooner:

.grid {
  --cirth-grid-min-column: 16rem;
}

.grid and .row only exist in the default build with classes enabled; there's no classless equivalent since both require a class to opt in.

Breaking change #

Before this release, .grid was what .row is now: a single row of equal-width columns (minmax(0%, 1fr), which never wraps) that stacked to one column below md. If you were using .grid for that behavior, rename it to .row — the markup and behavior are unchanged, only the class name is. .grid itself now wraps, has no md breakpoint, and needs the new --cirth-grid-min-column token instead.