Grid Template Columns & Rows

Grid Template Columns & Rows

Grid lets you place content in rows and columns.

Enabling grid

grid sets display: grid (or inline-grid).

Grid template columns

grid-cols-<n> creates equal-width columns:

<div class="grid grid-cols-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

grid-cols-3 → grid-template-columns: repeat(3, minmax(0, 1fr)).

Minmax(0, 1fr)

The default repeat uses minmax(0, 1fr), which allows tracks to shrink below content size - items won't overflow.

Arbitrary column templates

<div class="grid grid-cols-[200px_1fr_2fr]">...</div>

Grid template rows

grid-rows-<n> creates rows:

<div class="grid grid-rows-3">...</div>

Auto rows and columns

• auto-cols-auto, auto-cols-min, auto-cols-max, auto-cols-fr.
• auto-rows-auto, auto-rows-min, auto-rows-max, auto-rows-fr.

TL;DR

• grid enables grid.
• grid-cols-3 creates 3 equal columns.
• grid-rows-2 creates 2 rows.
• grid-cols-[...] supports arbitrary templates.