Grid

Pair d-grid (or grid-main-content) with these utilities to build CSS Grid layouts. Most accept responsive variants ({util}-{breakpoint}-{n}).

Define tracks

• grid-repeat-cols-{1–12} — equal columns
• grid-repeat-rows-{1–12} — equal rows

<div class="d-grid grid-repeat-cols-3 gap-4">
  <div>1</div><div>2</div><div>3</div>
</div>

Auto-responsive tracks

• grid-auto-fit-cols — columns expand to fill available space
• grid-auto-fill-cols — fixed-size columns, leaving gaps

Both default to a 200px minimum (override --_min-col-size) and adapt via container queries when wrapped in grid-list:

<div class="grid-list">
  <div class="d-grid grid-auto-fit-cols gap-3">…</div>
</div>

Span & placement

• Span: grid-span-col-{1–12}
• Start / end: grid-start-col-{n}, grid-end-col-{n}, grid-start-row-{n}, grid-end-row-{n}

Auto sizing & flow

• grid-auto-cols, grid-min-cols, grid-max-cols, grid-fr-cols (and -rows equivalents)
• grid-auto-flow-{row|column|dense|row-dense|column-dense}

Subgrid & app shell

• grid-subgrid-cols, grid-subgrid-rows
• grid-main-content — a ready-made auto 1fr shell (sidebar + content) that collapses to a single column below 1024px