Grid

Basic grid

Use .grid to create a block-level grid container (sets display: grid; gap: 1rem). Combine with .grid-cols-{n} to define the number of columns. ArchCSS uses a 12-column grid system.

<div class="grid grid-cols-3">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
  <div>Card 5</div>
  <div>Card 6</div>
</div>

Column count

Column classes are generated from $grid-design: 12, giving you .grid-cols-1 through .grid-cols-12. Each sets grid-template-columns: repeat(n, minmax(0, 1fr)).

All column classes support responsive prefixes for mobile-first layouts:

<!-- 1 col mobile -> 2 col md -> 4 col lg -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Gap utilities

Control spacing between grid cells using gap utilities. .g-{n} sets both row and column gap. .gx-{n} sets column gap only. .gy-{n} sets row gap only. Values range from 0 to 6.

<!-- Uniform gap -->
<div class="grid grid-cols-3 g-4">...</div>

<!-- Different column and row gaps -->
<div class="grid grid-cols-3 gx-4 gy-2">...</div>

Responsive grid

Combine grid and gap utilities with responsive prefixes to build adaptive card layouts. The example below stacks on mobile, becomes 2 columns at md, and 3 columns at lg.

<div class="grid md:grid-cols-2 lg:grid-cols-3 g-3">

  <div class="card">
    <img src="..." alt="...">
    <h3>Card Title</h3>
    <p>Description</p>
  </div>

  <!-- repeat for more cards... -->

</div>

Tip: Use .inline-grid instead of .grid when you need the container itself to shrink to fit its content, rather than stretching to the full available width.

Placement

Position and size individual grid items within the track lines. .col-span-{n} and .row-span-{n} stretch an item across n tracks; .col-start-{n}, .col-end-{n}, .row-start-{n}, and .row-end-{n} pin items to specific line numbers.

<div class="grid grid-cols-3 gap-3">
  <div class="col-span-2">Spans 2 columns</div>
  <div>Normal cell</div>
  <div class="col-start-2 col-end-4">From line 2 to line 4</div>
  <div class="row-span-2">Spans 2 rows</div>
  <div>Cell</div>
</div>

Alignment

Align the whole grid or a single cell with .place-items-* and .place-self-*. For inline-axis justify-items-* / justify-self-* equivalents, see the Flexbox page - they apply to grid containers too.

Auto-fit and auto-fill

Let the grid wrap items into as many equal columns as fit, each at least {px} wide. .grid-fill-{px} uses auto-fill (keeps ghost tracks), .grid-fit-{px} uses auto-fit (collapses empty tracks). Built-in widths: 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, and 300.

<div class="grid grid-fit-200">
  <div class="card">Card</div>
  <div class="card">Card</div>
  <div class="card">Card</div>
</div>

Resize the page to see the columns reflow. Use a width around the size of your smallest card so items never crush below it.

Advanced grid

Content-sized columns, row templates, auto-flow, and resets.

<div class="grid grid-cols-3 grid-flow-dense">
  <div class="col-span-2">Wide cell</div>
  <div>Cell</div>
  <div>Cell</div>
</div>

<!-- Content-sized columns, not 1fr -->
<div class="grid grid-columns-3">
  <div>Fits content</div>
  <div>Fits content</div>
</div>

<!-- Reset a grid template -->
<div class="grid grid-columns-none">...</div>

Note: .grid-cols-{n} produces equal, fluid 1fr columns, while .grid-columns-{n} sizes columns to their content (repeat(auto, n)). The names differ only in the s character.