Webseiten-Layout mit CSS-Grids
Mit dem CSS Grid Layout Module hat das W3C endlich einen einfachen Standard zur Platzierung von Elementen auf einer Webseite geschaffen. Die aktuellen Browser Firefox 52, Chrome 57 und Safari 10.1 beherrschen Grids bereits.
- Dr. Oliver Diedrich
Es ist eine gängige Übung für Webdesigner: die Elemente einer Webseite in einem Raster positionieren. In der Frühzeit des Webs machte man das mit Tabellen, gerne auch mal ineinander verschachtelt; aktuelle CSS-Frameworks nutzen dafür Flexboxes, float und clear. Die neuen CSS-Grids bieten eine elegante Möglichkeit, ein zweidimensionales Gitter zur Platzierung der Elemente einer Website zu definieren.
Mittlerweile hat das W3C den Standard CSS Grid Layout Module Level 1 so weit fertig, dass die aktuellen Browser-Versionen Firefox 52 und Chrome 57 sowie als jüngster Neuzugang der mit iOS 10.3 and macOS Sierra 10.12.4 ausgelieferte Safari 10.1 standardmäßig Grid-Layouts unterstützen. Firefox enthält in seinen Entwicklerwerkzeugen sogar schon einen Grid Inspector. Edge und Internet Explorer 10 und 11 implementieren eine ältere, inkompatible Version des Grid-Standards. Zumindest Edge will Microsoft jedoch auf den aktuellen Stand bringen.
CSS-Grids sind einfach in der Handhabung:
#container {
display: grid;
grid-template-areas: "head head"
"nav main"
"foot foot";
}
legt fest, dass die Website eine seitenbreite Kopf- und Fußzeile erhält und der Bereich dazwischen in einen Navigations- und einen Inhaltsbereich aufgeteilt ist.
Mehr zur Programmierung von Grids lesen Sie in iX 4/2017:
- Hinter Gittern: Webseiten mit grid strukturieren
(odi)
