CSS grid-template-areas

Grid Template Areas

CSS grid-template-areas ist eine elegante Alternative zu Grid-Zeilen und -Spalten. Durch Namen für die Zellen des Gridrasters ist die Struktur des Grids gut lesbar und nachvollziehbar.

Das standardmäßige Grid-Layout hingegen platziert die Grid-Elemente in Zeilen anhand eines Anfangs- und Endpunkts (grid-column-start und grid-column-end).

Layout-Raster nach Namen

grid-template-areas platziert die Grid-Elemente anhand einer gedachten Tabelle oder Rasters in individuelle Zellen.

grid-column-start / grid-column-end vs grid-template-areas

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.

Wird ein Name in benachbarten Zellen (gleich ob neben- oder untereinander) wiederholt, erstreckt sich das Element über beide oder mehr Zellen.

.grid-raster {
   display:grid;
   gap: 14px;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-areas: "radis plum mais"
                        "erbse pilz mais";
			
}

Die Bereiche sind durch sprechende Namen gekennzeichnet, ein Punkt steht für eine leere Zelle.

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

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 dritte Spalte einzuziehen, reicht es, grid-template-areas neu festzulegen.

@media (min-width: 2400px) {
.grid-raster {
   width: 700px;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-areas: "radis plum erbse mais"
                        ".     .    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.
Grid Layout im Firefox-Inspektor anzeigen
Grid Raster mit Firefox untersuchen

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.

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16