Layout-Raster nach Namen
grid-template-areas platziert Grid-Elemente anhand einer gedachten Tabelle oder Rasters in individuelle Zellen.
Das standardmäßige Grid-Layout hingegen platziert die Grid-Elemente in Zeilen anhand eines Anfangs- und Endpunkts (grid-column-start und grid-column-end).
Grid-Areas sind wie Ascii-Art oder Malen nach Zahlen aufgebaut: Jeder Bereich in Hochkommas definiert eine Zeile und jedes Wort in dieser Zeile definiert eine Spalte.
Grid-Items in Grid-Areas anordnen
Auf kleinen Monitoren bleiben die Elemente linear, bei größeren Monitoren werden sie im Gridraster angeordnet. Wird ein Name (mais) in benachbarten Zellen (gleich ob neben- oder untereinander) wiederholt, erstreckt sich das Element über beide oder mehr Zellen.
@media (min-width: 680px) {
.grid-raster {
display:grid;
gap: 14px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "radis plum mais"
"erbse pilz mais";
}
}
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi.
Beetroot water spinach okra water chestnut ricebean erbse catsear courgette summer
Turnip greens yarrow ricebean rutabaga
Gumbo beet greens mais soko endive gumbo gourd
Gumbo beet greens mais soko endive gumbo gourd
CSS grid-area schiebt die Elemente in die passenden Zellen. Du siehst hier aber nicht drei, sondern vier Spalten? Mach dein Browserfenster ein Stück schmaler.
.radis { grid-area: radis; }
.plum { grid-area: plum; }
.mais { grid-area: mais; }
.erbse { grid-area: erbse; }
.pilz { grid-area: pilz; }
Die Bereiche sind durch sprechende Namen gekennzeichnet. Die Zeilen werden gleich hoch, ein Element, dass sich über zwei Zeilen erstreckt, wird so hoch wie die zwei Zeilen.
Das CSS-Grid ähnelt also den alten Layout-Tabellen. Der gravierende Unterschied: Der Inhalt jeder Zeile wird durch grid-area festgelegt.
Anstelle von gap: 14px kann der Abstand zwischen Zeilen getrennt vom Abstand zwischen Spalten gesetzt werden.
column-gap: 14px; row-gap: 24px;
Weitere Spalten: Breakpoints für grid-areas
Um für einen größeren ViewPort eine vierte Spalte einzuziehen, reicht es, grid-template-areas neu festzulegen.
@media (min-width: 2000px) {
.grid-raster {
width: 700px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "radis plum erbse mais"
"pils pilz pilz mais";
}
}
Grid-Layout im Firefox-Inspektor
Wenn das Layout des Grid-Containers komplexer wird, gibt der Firefox-Inspektor ein grafisches Abbild des Rasters.
- Firefox-Inspektor einspielen mit der rechten Maustaste und Element untersuchen,
- den Block des Grid-Containers markieren und im Layout Raster hervorheben aktivieren.
Mit dem Verbreitern und Zusammenziehen des Browserfensters ändert Firefox auch die Grafik des Rasters, damit der Grid-Container in allen Breakpoints untersucht werden kann.
Alternative zu grid-template-areas für IE11
grid-template-areas wird von IE11 nicht unterstützt und hat auch kein direktes Äquivalent. IE11 wird mit Grid-Linien bei der Stange gehalten.
Weiterhin unterstützt IE11 die Eigenschaft gap nicht. Anstelle von gap (vorher: grid-gap) kann margin für den Abstand zwischen den Spalten und Zeilen sorgen. Um in den immergrünen Browsern gap für den Abstand zwischen den Grid-Blöcken zu nutzen, schaltet die CSS @supports-Regel die margin-Eigenschaft sofort wieder aus.
.block { margin-right: 14px; margin-bottom: 14px; }
@supports ( display: grid ) {
.block { margin-right: 0; margin-bottom: 0;}
}
Der Rest ist Schreibarbeit und Abzählen der Linien.
.grid-raster {
ms-grid-columns : 1fr 1fr 1fr;
}
.radis, .erbse {
-ms-grid-column:1;
}
.plum, .pilz {
-ms-grid-column:2;
}
.radis, .plum { -ms-grid-row: 1 }
.erbse, .pilz { -ms-grid-row: 2 }
.mais {
-ms-grid-row: 1;
-ms-grid-column:3;
-ms-grid-row-span: 2;
}
Am Ende immer daran denken: Das HTML-main-Element funktioniert in IE11 nicht in einem Grid-Raster.
