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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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 Rows and Columns
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.

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";
	}
}

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.

Grid template-area Demo

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi.

Grid template-area Demo

Beetroot water spinach okra water chestnut ricebean erbse catsear courgette summer

Grid template-area Demo

Turnip greens yarrow ricebean rutabaga

Grid template-area Demo

Gumbo beet greens mais soko endive gumbo gourd

Grid template-area Demo

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 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  .    .     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.