Lesson 5 3 min read

CSS Grid Layout

What is CSS Grid?

CSS Grid is a two-dimensional layout system — it handles both rows and columns at the same time. While Flexbox excels at one-dimensional layouts (a row of items or a column of items), Grid shines when you need to control both axes simultaneously.

Creating a grid

CSS

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

This creates a 3-column layout: fixed sidebars (200px each) with a flexible center column (1fr = one fraction of the remaining space).

HTML

<div class="container">
  <header>Header</header>
  <nav>Sidebar</nav>
  <main>Content</main>
  <aside>Right panel</aside>
  <footer>Footer</footer>
</div>

The `fr` unit

fr stands for "fraction." It divides available space proportionally:

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

This creates three columns where the middle one is twice as wide as the sides. Think of fr as shares of a pie.

repeat() and auto-fill

For grids with many equal columns:

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

For responsive grids that automatically adjust the number of columns:

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

This creates as many 250px-minimum columns as will fit, and each one grows to fill extra space. No media queries needed — the grid adapts automatically.

Placing items

By default, grid items fill cells left-to-right, top-to-bottom. You can manually place items:

CSS

.header {
  grid-column: 1 / -1;  /* span all columns */
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.content {
  grid-column: 2;
  grid-row: 2;
}

1 / -1 means "from the first grid line to the last" — a quick way to span all columns.

Named grid areas

For complex layouts, naming areas makes the code much more readable:

CSS

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: 1rem;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

You can literally see the layout shape in the CSS. To make the sidebar disappear on mobile:

CSS

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "footer";
  }
  .sidebar { display: none; }
}

Alignment

Grid has the same alignment properties as Flexbox, but they work in two dimensions:

CSS

.grid {
  display: grid;
  justify-items: center;  /* horizontal alignment of items within their cells */
  align-items: center;    /* vertical alignment of items within their cells */
}

For the grid itself inside its container:

CSS

.grid {
  justify-content: center; /* horizontal alignment of the grid */
  align-content: center;   /* vertical alignment of the grid */
}

Grid vs Flexbox — when to use which

Use case	Best tool
Navigation bar	Flexbox
Card grid	Grid
Centering one element	Flexbox
Full page layout	Grid
Items in a single row/column	Flexbox
Dashboard with rows and columns	Grid

They work great together — use Grid for the overall page layout and Flexbox for components within each grid cell.

Key takeaway

CSS Grid is the go-to for two-dimensional layouts. Use grid-template-columns with fr units for flexible sizing, repeat(auto-fill, minmax(...)) for responsive grids, and named areas for complex page layouts. Combine Grid with Flexbox for the best results.