Lektion 2 von 5

CSS Grid: in Rastern denken

CSS Grid ordnet Elemente in Zeilen UND Spalten an. Man aktiviert display: grid am Container.

grid-template-columns legt die Spalten fest: repeat(3, 1fr) erzeugt drei gleich breite Spalten, und gap fügt Abstand dazwischen ein.

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

🎯 Dein Ziel

Eine <div class="grid"> enthält vier Karten. Setze .grid per CSS auf display: grid mit drei gleichen Spalten: grid-template-columns: repeat(3, 1fr).

PRO-Lektion

Dieses fortgeschrittene Kapitel gehört zu CodeAge PRO. Schalte es frei, um dein Abenteuer fortzusetzen.