CSS: Grid Layout

CSS Grid lays out content across rows and columns, making two-dimensional page and card layouts easier to describe.

What you will learn

How to create grid tracks with columns and rows
How gap and repeat help build responsive layouts
When Grid is a better fit than Flexbox

Minimal example

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

@media (max-width: 40rem) {
  .cards { grid-template-columns: 1fr; }
}

Grid defines both dimensions. Use fr units to share available space and gap to separate tracks without adding margins to every child.

Common mistakes

Use a valid CSS length in media queries; replace the illustrative breakpoint with your project’s chosen value.
Choose Flexbox when the layout mainly follows one row or column.
Do not force every visual position with explicit coordinates; let the grid adapt to content where possible.