Linktipps
CSS-Grids – ein neuer Layoutansatz
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
Kommentare
kaiserkiwi
am 15.03.2017 - 14:54
Nicht böse gemeint, aber vor dem Schreiben solcher Zeilen, kann man doch sicherlich mal kurz auf caniuse.com schauen, wie die Lage wirklich aussieht oder? Auch wenn Firefox und Chrome die ersten sind, die es nach dem w3c-Standard implementieren, unterstützen der IE und Edge das schon länger. Ja, es ist eine ältere Syntax, aber es funktioniert und dank dem Autoprefixer sollte es auch heutzutage absolut kein Problem mehr sein, wenn ein Browser eine andere Syntax nutzt.
Ich stimme definitiv zu, dass Microsoft den Standard richtig unterstützen muss, aber in dem Fall hängt die Nutzung von Grids einfach mal nicht am IE, denn der kann das schon deutlich länger, als jeder andere.
Jens Grochtdreis (Webkraut)
am 15.03.2017 - 15:23
Du hast vollkommen Recht. Mein Fehler. Ich habe den Text dementsprechend verändert. Danke für den Hinweis.
Martin Bauer
am 03.04.2017 - 16:16
Besten Dank für die gute Linksammlung.
Und Gott sei Dank ist der IE ja fast schon unter ferner liefen angekommen - selbst bei Industriekunden.
Neuen Kommentar hinzufügen
Bitte beachtet unsere Hausregeln fürs Kommentieren. Die Kommentare werden nach sechs Wochen geschlossen.