CSS Grid Explained: The Complete Guide

CSS Grid is the layout model built specifically for two-dimensional layouts — arranging content into rows and columns at the same time, rather than a single line like flexbox handles. It's the right tool whenever you're thinking in terms of a genuine grid: a photo gallery, a dashboard, or an entire page skeleton.

Turning On Grid

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

This arranges the six items into a tidy 3-column grid, automatically wrapping onto a second row of three once the first row fills up — rows are created automatically as needed, you only had to describe the columns. gap adds consistent spacing between every row and column without any manual margins.

Understanding fr Units

1fr means "one fraction of the available space." grid-template-columns: 1fr 1fr 1fr creates three equal-width columns, because each column claims one equal share. You can mix proportions freely:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* fixed sidebar, flexible main area */
}

This gives you a sidebar locked at exactly 240px, with the second column (the main content) automatically consuming every remaining pixel of the container's width — the same fixed-plus-fluid layout flexbox can do, but Grid lets you define it in one line directly on the parent, without setting flex-grow/flex-basis on each child individually.

Rows Work the Same Way

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

This describes a full-page skeleton: a header row that's only as tall as its content (auto), a main content row that stretches to fill all remaining vertical space (1fr), and a footer row that again only takes the height it needs — all pinned to fill the full viewport height. This single declaration replaces what used to require absolute positioning or JavaScript-measured heights.

Next Steps

This covers Grid's foundation. For naming and visually mapping out regions of a layout (rather than just counting column numbers), see grid-template-areas, and for building grids that adapt to any screen size without writing a single media query, see the fr unit combined with minmax().

---