<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(140px,1fr))">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>

Settlement

Terminals

Risk holds

Payouts

Disputes

Reports

Grid wrapping into rows

<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-width:40rem">
  <div class="card">Settlement</div>
  <div class="card">Terminals</div>
  <div class="card">Risk holds</div>
  <div class="card">Payouts</div>
  <div class="card">Disputes</div>
  <div class="card">Reports</div>
</div>

99.8% uptime novapay

Row: a wrapping action line (constrained here to show the wrap)

<div class="row" style="max-width:22rem">
  <button class="btn btn--primary">Talk to us</button>
  <button class="btn btn--secondary">Download</button>
  <button class="btn btn--ghost">Ghost</button>
  <span class="badge badge--success"><span class="badge__dot"></span> 99.8% uptime</span>
  <span class="badge badge--accent">novapay</span>
</div>

Usage

The grid wraps items into new rows on its own: more items than columns simply continue on the next row, and narrower screens get fewer columns.
Mobile-first: use auto-fit/minmax() columns so layouts stack on phones instead of squeezing.
.row is a wrapping flex line for buttons, badges, and chips: when space runs out it flows onto the next row (the demo is width-constrained so you can see it happen).
Gaps come from the spacing scale (--space-*), never ad-hoc pixel values.

‹ Container Surface & text utilities ›