Grid Containers

Grid Containers

Distribute rows and columns with align-justify-*.

justify-content (space distribution)

When the grid is NARROWER than the container, this spaces whole columns:

.grid {
  display: grid;
  grid-template-columns: 100px 100px;
  justify-content: center;         /* columns centered */
  justify-content: space-between;
  justify-content: space-around;
}

align-content (row distribution)

Spreads rows vertically when there's extra height:

.grid {
  display: grid;
  height: 400px;
  grid-template-rows: 100px 100px;
  align-content: center;           /* start, end, space-between... */
}

justify-items (per-item horizontal)

Controls each item INSIDE its cell:

.grid {
  justify-items: center;  /* stretch (default), start, end, center */
}

align-items (per-item vertical)

.grid {
  align-items: center;
}

gap shorthand

.grid {
  gap: 20px;
  gap: 10px 30px;  /* row column */
}

The -content vs -items difference

• *-content: spaces/track groups (whole grid).

*-items: align each item within its own cell.

TL;DR

• justify-content/align-content: spread the tracks.
• justify-items/align-items: align items within cells.
• gap is spacing.
• -content = the grid as a whole, -items = cells.