CSS Grid Layout: Zweidimensionale Layouts, endlich nativ

Die CSS Grid Layout Spezifikation reift heran und die ersten Browser implementieren Unterstützung. Schluss mit Hacks durch Floats und Flexbox bei komplexen Layouts — ein Leitfaden zu CSS Grid.

Von Tabellen über Floats zu Grid¶

Die Geschichte des CSS-Layouts ist eine Geschichte der Hacks. Tabellenbasierte Layouts in den 90ern, Float-basierte Layouts in den 2000ern, Flexbox für eindimensionale Layouts. CSS Grid bringt endlich ein natives zweidimensionales Layout-System.

Flexbox löst eine Zeile oder eine Spalte. Grid löst Zeilen UND Spalten gleichzeitig. Wir können endlich komplexe Layouts ohne Positionierungstricks erstellen.

CSS Grid Grundlagen¶

Sie definieren ein Grid auf dem Container:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 20px;
  min-height: 100vh;
}

.header  { grid-column: 1 / -1; }
.sidebar { grid-column: 1; }
.main    { grid-column: 2; }
.aside   { grid-column: 3; }
.footer  { grid-column: 1 / -1; }

Die fr-Einheit (Fraction) verteilt freien Platz. grid-template-areas ermöglicht benannte Bereiche für noch besser lesbaren Code.

Grid Template Areas¶

Benannte Bereiche sind die intuitivste Art, ein Layout zu definieren:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

Für Responsive Design genügt es, grid-template-areas in einer Media Query neu zu definieren — eine komplette Layout-Änderung ohne Anpassungen am HTML.

Unterstützung und Adoption¶

CSS Grid befindet sich noch in der Implementierungsphase:

• Chrome/Firefox — hinter einem Flag, volle Unterstützung wird für 2017 erwartet
• Edge — ältere Spezifikation mit dem -ms- Präfix
• Safari — in Vorbereitung

Für den Produktionseinsatz ist es noch zu früh, aber experimentieren Sie und bereiten Sie sich vor. Grid und Flexbox ergänzen sich — Grid für das Seitenlayout, Flexbox für Layouts auf Komponentenebene.

Fazit: Eine Revolution im CSS-Layout¶

CSS Grid ist der größte Fortschritt im CSS-Layout der letzten 20 Jahre. Sobald es vollständig unterstützt wird, entfällt die Notwendigkeit von CSS-Frameworks wie Bootstrap für Grid-Systeme. Beginnen Sie heute mit dem Experimentieren, damit Sie morgen bereit sind.