CSS Grid

CSS Grid lays a container out in rows and columns at once. You define the tracks, drop items in, and the browser does the placement — no floats, no nested wrappers.

Where you meet it

Whole-page layouts: header, sidebar, main, footer in one container.
Image galleries and card decks that need even, tidy rows.
Dashboards and forms where things must line up on two axes.

What it does

Set display: grid on a parent and it becomes a grid container; its direct children become grid items. You describe the tracks — the columns and rows — and items flow into the cells automatically, or you place them by hand.

You place items on the lines, not the tracks — a 3-column grid has 4 lines, so 1 / 4 spans all three.

How it works

grid-template-columns and grid-template-rows define the tracks. The fr unit splits the leftover space into fractions, so columns share what's free. gap adds gutters between tracks without margin tricks. In one line: Flexbox lays out one axis at a time; Grid handles both rows and columns together.

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 16px;                              /* gutter between cells */
}

/* mix fixed and flexible */
.page {
  grid-template-columns: 200px 1fr;       /* sidebar + stretchy main */
}

Place an item across tracks with grid-column: 1 / 3 (span from line 1 to line 3). repeat(auto-fit, minmax(200px, 1fr)) packs as many columns as fit — responsive with no media query.

Watch out

Grid lines are counted, not the tracks — a 3-column grid has lines 1 through 4. grid-column: 1 / 4 spans all three.
1fr isn't "a third of the width": fixed tracks and gaps come off first, then fr shares what remains.
Reach for Grid for 2-D structure; Flexbox is often simpler for a single row or column of content.

Go deeper

CSS Grid ordnet einen Container in Zeilen und Spalten zugleich an. Du definierst die Tracks, legst Items hinein, und der Browser übernimmt die Platzierung — ohne Floats, ohne verschachtelte Wrapper.

Wo es vorkommt

Ganze Seiten-Layouts: Header, Sidebar, Main, Footer in einem Container.
Bildergalerien und Karten-Decks mit gleichmäßigen, sauberen Reihen.
Dashboards und Formulare, in denen alles auf zwei Achsen fluchten muss.

Was es tut

Setzt du display: grid auf ein Elternelement, wird es zum Grid-Container; seine direkten Kinder werden zu Grid-Items. Du beschreibst die Tracks — die Spalten und Zeilen — und die Items fließen automatisch in die Zellen, oder du platzierst sie von Hand.

Du platzierst Items an den Linien, nicht an den Tracks — ein 3-Spalten-Grid hat 4 Linien, also spannt 1 / 4 über alle drei.

Wie es funktioniert

grid-template-columns und grid-template-rows definieren die Tracks. Die fr-Einheit teilt den freien Platz in Bruchteile, sodass sich Spalten das Verfügbare teilen. gap erzeugt Abstände zwischen Tracks ohne Margin-Tricks. In einem Satz: Flexbox arbeitet auf einer Achse, Grid auf Zeilen und Spalten gleichzeitig.

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* drei gleiche Spalten */
  gap: 16px;                              /* Abstand zwischen Zellen */
}

/* fest und flexibel mischen */
.page {
  grid-template-columns: 200px 1fr;       /* Sidebar + dehnbarer Hauptbereich */
}

Ein Item über mehrere Tracks spannst du mit grid-column: 1 / 3 (von Linie 1 bis Linie 3). repeat(auto-fit, minmax(200px, 1fr)) packt so viele Spalten wie passen — responsiv ohne Media Query.

Worauf achten

Gezählt werden die Grid-Linien, nicht die Tracks — ein 3-Spalten-Grid hat die Linien 1 bis 4. grid-column: 1 / 4 spannt über alle drei.
1fr heißt nicht "ein Drittel der Breite": feste Tracks und Gaps gehen zuerst ab, dann teilt fr den Rest.
Grid für 2-D-Struktur; für eine einzelne Zeile oder Spalte ist Flexbox oft einfacher.