Nach mehr als 20 Jahren bekommt CSS endlich ein richtiges Layoutmodul. Und die ersten beiden Browser haben die Technik auch schon implementiert. Dank der alten Browser ändert sich so schnell nichts, aber eine Beschäftigung mit CSS-Grids ist nun nicht mehr rein theoretisch. Ein paar Linktipps helfen dabei.
Nach so vielen Jahren bekommen wir endlich ein Layoutmodul für Seiten in CSS. Bislang haben wir dafür meist Floats ge-/missbraucht. Für Module wie Navigationen setzt sich immer mehr die ebenfalls relative neue Flexbox durch. Nun kommen CSS-Grids. Sie eröffnen ganz neue Möglichkeiten für das Arrangement von Inhalten.
Die endgültige Spezifikation der CSS-Grids wird im neuesten Firefox und Chrome unterstützt. Safari (vor allem auf iOS) zieht demnächst nach. IE10, IE 11 und Edge unterstützen die Spezifikation nicht komplett. Deshalb werden wir noch für eine längere Zeit mit Progressive Enhancement arbeiten und Tools wie Autoprefixer müssen, wenn wir CSS-Grids einsetzen wollen. Hier sind ein paar Leseempfehlungen zum Thema:
- CSS-Grids: Raster im IE10+ und in neuer Syntax definieren
- Grid + Flexbox: the best 1-2 punch in web layout
- Codrops CSS-Reference zu Grids
- CSS Grid: Responsive and Accessibility
- CSS Grid Guides on MDN
- Grid by Example
- CSS Grid. One layout method not the only layout method
- CSS Grid Layout Terminology, Explained
- A Complete Guide to Grid