CSS Grid ist ein Layoutverfahren für zwei Richtungen: ein Raster aus Zeilen und Spalten, in das Elemente gelegt werden.
- CSS Grid
Layoutverfahren, das einen Bereich in Zeilen und Spalten teilt und Elemente darin platziert.
Beispiel: „CSS Grid denkt in zwei Richtungen zugleich.“Auch: Raster-Layout.
Spuren und Linien
MDN unterscheidet beides: A grid track is the space between any two adjacent lines, und man definiert die Spuren, nicht die Linien: Grid then gives us numbered lines to use when positioning items. Linie 1 liegt links, bei rechtsläufiger Schrift.
Die Einheit fr
.raster {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1.5rem;
}The fr unit represents a fraction of the available space. Im Beispiel wird der Platz in vier Teile geteilt, zwei davon gehen an die erste Spalte. Wichtig: Der Platz für den Gap wird vorher abgezogen.
Wann Grid, wann Flexbox
Grid, wenn Zeilen und Spalten zusammen gedacht werden: Seitenlayouts, Kartenraster, Formulare mit Beschriftungsspalte. Flexbox, wenn eine Richtung genügt.