Grid Introduction

Grid Introduction

Grid is the two-dimensional layout king: rows AND columns at once.

What grid gives you

display: grid creates a layout where children are placed into rows and columns, a big upgrade over flex for full-page layouts.

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

Three equal columns!

The fr unit

fr = fraction of free space:

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;   /* big + small column */
}

Tracks and gaps

• grid-template-columns: column widths.
• grid-template-rows: row heights.
• gap: spacing (or row-gap, column-gap).

Auto-placement

Children fill the grid row by row, left to right, automatically, unless you place them yourself.

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

Handy helpers: repeat() and minmax()

• repeat(3, 1fr) = three equal columns.
• minmax(200px, 1fr) = at least 200px, can grow.

TL;DR

• display: grid -> two-dimensional layout.
• grid-template-columns/rows: define tracks.
• fr unit for flexible sizing.
• gap = spacing.
• repeat() and minmax() helper functions.