Grid-Layouts bieten leichtere Maintainability und zahlreiche Gestaltungsmöglichkeiten

CSS Grid: das kann die neue Spezifikation
Keine Kommentare

CSS ist aus der Website-Gestaltung schon lange nicht mehr wegzudenken – auch wenn die Sprache in ihren Anfängen nicht unbedingt für ihre Fähigkeiten beim Umgang mit komplexen Layouts bekannt war. Während das damals zwar nicht unbedingt problematisch war, erfordern Websites heutzutage immer komplexere Layouts, die aber mit den bisherigen Funktionalitäten von CSS nicht so einfach umzusetzen sind.

Um den fehlenden Support für komplexe Layouts zu kompensieren, behalfen sich viele Webdesigner darum mit der Nutzung von Floats oder einer absolute-Positionierung; zudem gibt es viele CSS-Frameworks, die Abhilfe schaffen sollen. Die Einführung von neuen CSS-Properties wie zum Beispiel der CSS-Grid-Spezifikation könnte die Lösung des Problems künftig jedoch deutlich vereinfachen. Patrick Brosset zeigt im Mozilla-Entwicklerblog, was hinter der neuen Spezifikation steckt und wie man sie praktisch nutzen kann.

CSS Grid Layouts: was ist das überhaupt?

Im Prinzip ist ein Grid nichts weiter, als unsichtbare horizontale und vertikale Linien, mit denen sich verschiedene Design- und Content-Elemente in einer Website positionieren lassen – und zwar so, dass sie gleichmäßig ausgerichtet und mit regelmäßigen Abständen dargestellt werden. Für den User ist so die Navigation einer Seite deutlich einfacher, weil das Layout die Navigationsmöglichkeiten visuell unterstützt.

Ähnlich verhält es sich auch mit einem Grid-Layout in CSS. Es umfasst mehrere vertikale und horizontale Linien, mit denen einzelne Zellen definiert und in diesen Content willkürlich positioniert werden können. Dabei besteht es aus den folgenden vier Bestandteilen:

  • Lines: vertikale und horizontale Linien
  • Tracks: der Bereich zwischen zwei parallelen Linien
  • Cells: Treffpunkt eines horizontalen und eines vertikalen Tracks
  • Areas: rechteckige Bereiche, die eine willkürliche Anzahl von Zellen umfassen können

Der besondere Vorteil eines solchen Grid-Layouts ist, dass Spalten, Zeilen, Zellen und Bereiche nicht mit einem Extra-CSS-Element definiert werden müssen und so nur das HTML-Parent-Element benötigt wird. Durch diese Abkoppelung der visuellen Reihenfolge auf der Seite von der Reihenfolge der Elemente im Markup lassen sich besonders leicht Optimierungen für die Accessibility vornehmen, ohne auf die Möglichkeit, visuelle Änderungen vornehmen zu können, verzichten zu müssen. Zusätzlich ist das Markup leichtgewichtiger – und vor allem einfacher zu verstehen und zu maintainen.

CSS Grid und Responsive Design

Eine bessere Maintainability ist aber nicht das einzige Plus, das die neue Grid-Spezifikation für Entwickler in petto hat. Auch Responsive Designs lassen sich mit der neuen Spezifikation umsetzen. Mit dem Grid-Layout lässt sich der Content vom Layout trennen, sodass Änderungen an nur einem der beiden Bereiche vorgenommen werden können, ohne den anderen zu beeinträchtigen.

So können die Linien und Areas mit Zahlen versehen werden, um den Content im Grid zu positionieren; zusätzlich lassen sich für sie auch Namen definieren, sodass es ausreicht, später nur den Namen einer Linie oder Area zu referenzieren. Damit lassen sich spätere Änderungen problemlos vornehmen und Media Queries für die dynamische Anpassung des Layouts implementieren.

Grids mit CSS erstellen

Ein Grid zu erstellen, erfordert nur ein einziges HTML-Element, nämlich den Grid-Container. Ihm können allerdings weitere HTML-Elemente, sogenannte Grid Items, hinzugefügt werden. Sie definieren, was später im Grid erscheint. Ebenso müssen die Anzahl der Spalten und Reihen sowie ihre Größe definiert werden. Um sich diese Arbeit zu vereinfachen, gibt es verschiedene Grid-Templates. Nutzt man dabei die auto-Funktion, fügt der Browser automatisch neue Reihen zum Grid hinzu, wenn sie benötigt werden.

Wird nicht definiert, welcher Content an welcher Stelle im Grid platziert werden soll, platziert der Algorithmus der Spezifikation die Grid Items automatisch in der Reihenfolge, in der sie angegeben werden. Besonders nützlich ist zudem die Nutzung von Areas. Dabei wird zunächst der Grid Container und dessen Tracks und Areas definiert. Anschließend können beliebige Änderungen am Layout vorgenommen werden. Wie das funktioniert, zeigt Brosset detailliert und mit zahlreichen Code-Beispielen in seinem Artikel zum Thema. Dort finden sich auch einige Beispiele für die praktische Nutzung von CSS Grids in Websites.

Browser-Support von CSS Grids

CSS Grids sind also ein überaus nützliches Tool für die Gestaltung von Website-Layouts und sorgen vor allem für eine verbesserte Maintainability und die Trennung von Content und Layout, was insbesondere bei der Umsetzung von Responsive Design von Vorteil ist. Das Problem an der neuen Spezifikation ist jedoch, dass sie noch nicht von allen Browsern unterstützt wird.

So bietet aktuell nur Chrome einen ausreichenden Support für Grid-Layouts; für alle anderen Browser wird derzeit noch an der Implementierung des aktuellen Spezifikation-Standes gearbeitet. Allerdings bietet auch ein entsprechendes Polyfill die Möglichkeit, schon jetzt mit Grid-Layouts zu experimentieren – eine Chance, die Webdesigner auf jeden Fall nutzen sollten.

webinale – the holistic web conference

Diversity matters – Onlinemarketing 2020

mit Astrid Kramer (Astrid Kramer Consulting)

Das Recht auf Privatsphäre – eine Chance für UX

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

The Revenge of Structured Data

mit Stephan Cifka (Performics Germany GmbH)

IT Security Summit 2020

Zero Trust – why are we having this conversation?

mit Victoria Almazova (Microsoft)

Digitaler Ersthelfer

mit Martin Wundram (DigiTrace GmbH)

Aufmacherbild: blue grid or net with shining stars (seamless background) von Shutterstock / Urheberrecht: ledinka

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -