Denis Potschien 20. April 2018

Layouts mit CSS: Flexbox oder Grid?

Wie wir Websites gestalten, hat sich in den vergangenen Jahren immer wieder mal mehr, mal weniger radikal geändert. Mit der Einführung von CSS Flexbox hat eine entscheidende Erneuerung stattgefunden. Kurz darauf ist mit CSS Grid ein weiteres Layoutmodell hinzugekommen. Welches ist nun wofür besser geeignet? Muss ich mich für ein Modell entscheiden?

Vom Tabellenlayout zu CSS-Flexbox

Wer schon etwas länger im Webdesign unterwegs ist, wird sich an die Zeiten des Tabellenlayouts erinnern. Als es noch kein CSS gab, wurden abenteuerlich verschachtelte Tabellen gebastelt und Schriften, sowie Farben, direkt im HTML ausgezeichnet.

Flexbox-Modell

Mit der Einführung von CSS wurden Inhalt und Gestaltung voneinander getrennt und die Gestaltung per CSS begann ihren Siegeszug. Dank relativer und absoluter Positionierungen konnten HTML-Elemente beliebig platziert werden. Und die „float“-Eigenschaft ermöglichte es, Elemente nebeneinander darzustellen. War „float“ eigentlich dafür gedacht, Texte an Bildern entlang fließen zu lassen, wurde die Eigenschaft zu einer der wichtigsten in der Gestaltung von Layouts.

Doch Websites mussten auf der einen Seite dank unterschiedlicher Auflösungen und Ausrichtungen von Geräten immer flexibler gestaltet werden. Auf der anderen Seite wurden Weblayouts immer komplexer. Um dem Rechnung zu tragen, entstand das Flexbox-Modell.

Flexiblere Layouts dank Flexbox

CSS Flexbox setzt im Grunde an die Idee der Float-Layouts an. Per Flexbox ausgerichtete Elemente können in einer Reihe angeordnet werden. Dabei wird optional am Ende der Reihe in die nächste Zeile umgebrochen.

Im Gegensatz zu den Float-Layouts liefert das Flexbox-Modell noch weitere Features. So lässt sich die Breite einzelner Elemente innerhalb eines Flexbox-Layouts sehr variabel definieren. So wird per „flex-basis“ eine Standardgröße für Elemente definiert. Mit „flex-grow“ und „flex-shrink“ wird festgelegt, wie groß oder klein ein Element maximal sein darf. Auch die Ausrichtung der Elemente kann einfach und unkompliziert definiert werden.

Dazu kommt, dass eine Anordnung nicht nur horizontal möglich ist, sondern ebenso vertikal. Wer also aus dem typischen Zeilenlayout lieber ein Spaltenlayout zaubern möchte, kann dies mit CSS-Flexbox sehr einfach tun.

Umfangreiche Layouts mit CSS-Grid

Kurze Zeit, nachdem das Flexbox-Modell die Runde gemacht hatte, erblickte mit CSS Grid das zweite neue Layoutmodell das Licht des Internets. Während Flexbox eher vergleichbar ist mit den lange sehr beliebten Float-Layouts, erinnert das Grid-Modell eher an die guten alten Tabellenlayouts.

Grid-Modell

Aber auch hier gibt es natürlich entscheidende Unterschiede und vor allem Vorteile. Zunächst einmal ist CSS-Grid insbesondere dafür geeignet, komplexe Layouts zu erstellen. Dazu wird zunächst ein Gitter definiert, welches aus Zeilen und Spalten besteht. Mit den Eigenschaften „grid-template-rows“ und „grid-template-columns“ legst du die Anzahl und Größen der Gitterelemente fest. Dabei werden die Breiten und Höhen mit der neuen Einheit „fr“ für „fraction“ festgelegt.

Ein Wert von „1fr“ macht alle Spalten und Zeilen gleich groß und verteilt sie über den zur Verfügung stehenden Platz. Will man eine Spalte doppelt so groß haben wie die anderen, weist man ihr „2fr“ zu. Natürlich können aber auch absolute Einheiten wie Pixel verwendet werden.

Anschließend müssen die einzelnen HTML-Elemente noch im Gitter platziert werden. Dazu ist es wichtig, zu definieren, welche Bereiche des Gitters ein Element einnehmen soll. Hierfür gibt es die vier CSS-Eigenschaften „grid-column-start“, „grid-column-end“, „grid-row-start“ und „grid-row-end“.

Mit „grid-gap“ richtest du Abstände zwischen den einzelnen Gitterbereichen ein.

CSS-Flexbox oder CSS-Grid?

Bleibt die Frage, für welches Layoutmodell du dich nun entscheiden solltest. Glücklicherweise handelt es sich nicht um eine Entweder-oder-Frage. Denn beide Modelle haben ihre Berechtigung und ein unterschiedliches Einsatzgebiet.

Wann immer es darum geht, ein komplexes Layout zu entwickelt, bietet sich CSS-Grid an. Du kannst es einsetzen, um dein Grundlayout für eine Website festzulegen. Im Gitter definierst du Bereiche für den Header, die Navigation, den Inhalt und den Footer. Je nach Auflösung hast du dank CSS ja zudem die Möglichkeit, die Anordnung für kleine Displays komplett anders aussehen zu lassen.

Flexbox und Grid in Kombination

Wann immer es darum geht, Elemente neben- oder untereinander anzuordnen, bietet sich CSS-Flexbox an. Es ist etwa die richtige Wahl, wenn du eine Galerie gestaltest oder Links entsprechend ausrichten möchtest.

Grundsätzlich lässt sich sagen: CSS-Flexbox dient der eindimensionalen Anordnung von Elementen. Die Elemente laufen also immer nur in eine Richtung – entweder nach rechts oder nach unten, wobei optional ein Zeilen- beziehungsweise Spaltenwechsel möglich ist. CSS-Grid ist zweidimensional, da du hierbei eine gerasterte Fläche zur Verfügung hast, auf der du Elemente frei platzieren kannst.

Browserkompatibilität

In Sachen Browserkompatibilät spricht mittlerweile auch nichts mehr gegen CSS-Grids. Denn so wie das Flexbox-Modell wird auch das Grid-Modell mittlerweile von allen Browsern unterstützt, teils schon seit mehreren Versionen. Selbst der Internet Explorer 11 ist dabei.

Jedoch ist beim Internet Explorer etwas Vorsicht geboten. Das Flex-Modell läuft dort nicht ganz rund, beim Grid-Modell bedarf es eines Prefixes.

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

9 Kommentare

  1. erst fluid, dann responsive, flexbox,… Im Grunde kaum wirkliche Neuerungen, nur die Bezeichnungen öndern sich alle paar Jahre, kommt mir so vor:)
    Die Sache mit den frameworks stärt mich persönlich auch schon seit einiger Zeit.
    Es ist kaum mehr möglich, ein template für beliebiges CMS zu finden, das nicht vollkommen überladen daherkommt.

  2. Leider hat sich in den Beitrag ein Fehler eingeschlichen, was die Kompatibilität betrifft. Natürlich läuft das Grid-Modell auch im Internet Explorer 11, im Edge sowieso. Ich habe den Beitrag entsprechen korrigiert.

  3. Wer die Vorteile beider Modelle mit der Verbreitung von flexbox nutzen möchte, sollte sich mal XY-Grid von Foundation ansehen. Der Preis ist, dass man ein CSS-Framework mit rumschleppt, aber da kann ich mit leben, weil man es sehr schlank konfigurieren kann. Hab es seit Monaten im Live-Einsatz und bin angetan.

  4. Servus Grid? Für was? Ohne Grid ist doch alles cooler! So wie draußen im Wald oder im Garten. No grids nur fun! Liebe Grüß

  5. Der IE10+11 und Edge bis V15 können einen älteren MS Syntax von CSS Grid darstellen.
    CSS Grid wurde ursprünglich von Microsoft entwickelt.
    Der alte MS Grrid Syntax kann Problem als Fallback für IE und Edge bei Webseiten eingebaut werden.
    Neue Browser überspringen einfach den Fallback CSS Code, da sie ihn nicht verstehen.
    Außerdem kann ein Flexbox oder Float Fallback im CSS Code stehen, da Grid höher gewichtet wird und vorrangig dargestellt wird wenn es der Browser versteht.

  6. Selbstverständlich können IE11 und Edge was mit Grids anfangen. Nicht alle Möglichkeiten werden unterstützt (benannte grid-areas zum Beispiel), aber grundsätzlich kann man Grid benutzen.

  7. Sicher, dass IE11 und vor allem Edge „nichts damit anfangen können“?

    https://caniuse.com/#feat=css-grid

  8. Ich selbst hab’s noch nicht getestet, aber caniuse zufolge soll Edge ab Version 16 Grid vollständig unterstützen:

    https://caniuse.com/#search=grid

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.