Layout

Grid Utility

Use .quanta-grid along with .grid-cols-{n} to set up a fixed‑column grid of 1–6 columns.

<div class="quanta-grid grid-cols-3 gap-4">
  <div class="p-4 bg-slate-200">1</div>
  <div class="p-4 bg-slate-300">2</div>
  <div class="p-4 bg-slate-400">3</div>
</div>

1

2

3

Auto‑Fit Columns

Use .grid-auto-fit for a responsive grid that fits as many 200px‑wide columns as possible.

<div class="quanta-grid grid-auto-fit gap-4">
  <!-- items expand/contract to fit -->
</div>

A

B

C

D

E

Grid Gaps

Control spacing with .gap-2, .gap-4, .gap-6, etc.

<div class="quanta-grid grid-cols-4 gap-6">…</div>

1

2

3

4

Responsive Columns

Prefix with breakpoints: .sm-grid-cols-2, .md-grid-cols-3, .lg-grid-cols-5, etc.

<div class="quanta-grid grid-cols-1 sm-grid-cols-2 md-grid-cols-3 gap-4">…</div>

A

B

C

D

E

Rows & Flow

Define row count with .grid-rows-2, or change auto‑flow with .grid-flow-col / .grid-flow-row.

<div class="quanta-grid grid-cols-3 grid-rows-2 gap-4">…</div>
<div class="quanta-grid grid-auto-fit grid-flow-col gap-4">…</div>

1

2

3

4

5

6

A

B

C

D