Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 20. April 2018

Layouts mit CSS: Flexbox oder Grid?

Wie wir Websites gestal­ten, hat sich in den ver­gan­ge­nen Jahren immer wie­der mal mehr, mal weni­ger radi­kal geän­dert. Mit der Einführung von CSS Flexbox hat eine ent­schei­den­de Erneuerung statt­ge­fun­den. Kurz dar­auf ist mit CSS Grid ein wei­te­res Layoutmodell hin­zu­ge­kom­men. Welches ist nun wofür bes­ser geeig­net? Muss ich mich für ein Modell ent­schei­den?

Vom Tabellenlayout zu CSS-Flexbox

Wer schon etwas län­ger im Webdesign unter­wegs ist, wird sich an die Zeiten des Tabellenlayouts erin­nern. Als es noch kein CSS gab, wur­den aben­teu­er­lich ver­schach­tel­te Tabellen gebas­telt und Schriften, sowie Farben, direkt im HTML aus­ge­zeich­net.

Flexbox-Modell

Mit der Einführung von CSS wur­den Inhalt und Gestaltung von­ein­an­der getrennt und die Gestaltung per CSS begann ihren Siegeszug. Dank rela­ti­ver und abso­lu­ter Positionierungen konn­ten HTML-Elemente belie­big plat­ziert wer­den. Und die „float“-Eigenschaft ermög­lich­te es, Elemente neben­ein­an­der dar­zu­stel­len. War „float“ eigent­lich dafür gedacht, Texte an Bildern ent­lang flie­ßen zu las­sen, wur­de die Eigenschaft zu einer der wich­tigs­ten in der Gestaltung von Layouts.

Doch Websites muss­ten auf der einen Seite dank unter­schied­li­cher Auflösungen und Ausrichtungen von Geräten immer fle­xi­bler gestal­tet wer­den. Auf der ande­ren Seite wur­den Weblayouts immer kom­ple­xer. Um dem Rechnung zu tra­gen, ent­stand das Flexbox-Modell.

Flexiblere Layouts dank Flexbox

CSS Flexbox setzt im Grunde an die Idee der Float-Layouts an. Per Flexbox aus­ge­rich­te­te Elemente kön­nen in einer Reihe ange­ord­net wer­den. Dabei wird optio­nal am Ende der Reihe in die nächs­te Zeile umge­bro­chen.

Im Gegensatz zu den Float-Layouts lie­fert das Flexbox-Modell noch wei­te­re Features. So lässt sich die Breite ein­zel­ner Elemente inner­halb eines Flexbox-Layouts sehr varia­bel defi­nie­ren. So wird per „flex-basis“ eine Standardgröße für Elemente defi­niert. Mit „flex-grow“ und „flex-shrink“ wird fest­ge­legt, wie groß oder klein ein Element maxi­mal sein darf. Auch die Ausrichtung der Elemente kann ein­fach und unkom­pli­ziert defi­niert wer­den.

Dazu kommt, dass eine Anordnung nicht nur hori­zon­tal mög­lich ist, son­dern eben­so ver­ti­kal. Wer also aus dem typi­schen Zeilenlayout lie­ber ein Spaltenlayout zau­bern möch­te, kann dies mit CSS-Flexbox sehr ein­fach tun.

Umfangreiche Layouts mit CSS-Grid

Kurze Zeit, nach­dem das Flexbox-Modell die Runde gemacht hat­te, erblick­te mit CSS Grid das zwei­te neue Layoutmodell das Licht des Internets. Während Flexbox eher ver­gleich­bar ist mit den lan­ge sehr belieb­ten Float-Layouts, erin­nert das Grid-Modell eher an die guten alten Tabellenlayouts.

Grid-Modell

Aber auch hier gibt es natür­lich ent­schei­den­de Unterschiede und vor allem Vorteile. Zunächst ein­mal ist CSS-Grid ins­be­son­de­re dafür geeig­net, kom­ple­xe Layouts zu erstel­len. Dazu wird zunächst ein Gitter defi­niert, wel­ches aus Zeilen und Spalten besteht. Mit den Eigenschaften „grid-tem­pla­te-rows“ und „grid-tem­pla­te-columns“ legst du die Anzahl und Größen der Gitterelemente fest. Dabei wer­den die Breiten und Höhen mit der neu­en Einheit „fr“ für „frac­tion“ fest­ge­legt.

Ein Wert von „1fr“ macht alle Spalten und Zeilen gleich groß und ver­teilt sie über den zur Verfügung ste­hen­den Platz. Will man eine Spalte dop­pelt so groß haben wie die ande­ren, weist man ihr „2fr“ zu. Natürlich kön­nen aber auch abso­lu­te Einheiten wie Pixel ver­wen­det wer­den.

Anschließend müs­sen die ein­zel­nen HTML-Elemente noch im Gitter plat­ziert wer­den. Dazu ist es wich­tig, zu defi­nie­ren, wel­che Bereiche des Gitters ein Element ein­neh­men 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“ rich­test du Abstände zwi­schen den ein­zel­nen Gitterbereichen ein.

CSS-Flexbox oder CSS-Grid?

Bleibt die Frage, für wel­ches Layoutmodell du dich nun ent­schei­den soll­test. Glücklicherweise han­delt es sich nicht um eine Entweder-oder-Frage. Denn bei­de Modelle haben ihre Berechtigung und ein unter­schied­li­ches Einsatzgebiet.

Wann immer es dar­um geht, ein kom­ple­xes Layout zu ent­wi­ckelt, bie­tet sich CSS-Grid an. Du kannst es ein­set­zen, um dein Grundlayout für eine Website fest­zu­le­gen. Im Gitter defi­nierst 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 klei­ne Displays kom­plett anders aus­se­hen zu las­sen.

Flexbox und Grid in Kombination

Wann immer es dar­um geht, Elemente neben- oder unter­ein­an­der anzu­ord­nen, bie­tet sich CSS-Flexbox an. Es ist etwa die rich­ti­ge Wahl, wenn du eine Galerie gestal­test oder Links ent­spre­chend aus­rich­ten möch­test.

Grundsätzlich lässt sich sagen: CSS-Flexbox dient der ein­di­men­sio­na­len Anordnung von Elementen. Die Elemente lau­fen also immer nur in eine Richtung – ent­we­der nach rechts oder nach unten, wobei optio­nal ein Zeilen- bezie­hungs­wei­se Spaltenwechsel mög­lich ist. CSS-Grid ist zwei­di­men­sio­nal, da du hier­bei eine geras­ter­te Fläche zur Verfügung hast, auf der du Elemente frei plat­zie­ren kannst.

Browserkompatibilität

In Sachen Browserkompatibilät spricht mitt­ler­wei­le auch nichts mehr gegen CSS-Grids. Denn so wie das Flexbox-Modell wird auch das Grid-Modell mitt­ler­wei­le von allen Browsern unter­stützt, teils schon seit meh­re­ren Versionen. Selbst der Internet Explorer 11 ist dabei.

Jedoch ist beim Internet Explorer etwas Vorsicht gebo­ten. 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.

10 Kommentare

  1. Ich habe Grid in einem Angular-Projekt ver­wen­det, funk­tio­niert super bei fast allen Browsern bis auf IE11, da muss man die grid rows manu­ell zuord­nen, -ms-grid-row: 1 -ms-grid-row: 2 usw, also die auto­ma­ti­sche Placement der rows ist nicht unter­stützt, GROßER NACHTEIL.

  2. erst flu­id, dann respon­si­ve, flex­box,… Im Grunde kaum wirk­li­che Neuerungen, nur die Bezeichnungen öndern sich alle paar Jahre, kommt mir so vor:)
    Die Sache mit den frame­works stärt mich per­sön­lich auch schon seit eini­ger Zeit.
    Es ist kaum mehr mög­lich, ein tem­pla­te für belie­bi­ges CMS zu fin­den, das nicht voll­kom­men über­la­den daher­kommt.

  3. Leider hat sich in den Beitrag ein Fehler ein­ge­schli­chen, was die Kompatibilität betrifft. Natürlich läuft das Grid-Modell auch im Internet Explorer 11, im Edge sowie­so. Ich habe den Beitrag ent­spre­chen kor­ri­giert.

  4. Wer die Vorteile bei­der Modelle mit der Verbreitung von flex­box nut­zen möch­te, soll­te sich mal XY-Grid von Foundation anse­hen. Der Preis ist, dass man ein CSS-Framework mit rum­schleppt, aber da kann ich mit leben, weil man es sehr schlank kon­fi­gu­rie­ren kann. Hab es seit Monaten im Live-Einsatz und bin ange­tan.

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

  6. Der IE10+11 und Edge bis V15 kön­nen einen älte­ren MS Syntax von CSS Grid dar­stel­len.
    CSS Grid wur­de ursprüng­lich von Microsoft ent­wi­ckelt.
    Der alte MS Grrid Syntax kann Problem als Fallback für IE und Edge bei Webseiten ein­ge­baut wer­den.
    Neue Browser über­sprin­gen ein­fach den Fallback CSS Code, da sie ihn nicht ver­ste­hen.
    Außerdem kann ein Flexbox oder Float Fallback im CSS Code ste­hen, da Grid höher gewich­tet wird und vor­ran­gig dar­ge­stellt wird wenn es der Browser ver­steht.

  7. Selbstverständlich kön­nen IE11 und Edge was mit Grids anfan­gen. Nicht alle Möglichkeiten wer­den unter­stützt (benann­te grid-are­as zum Beispiel), aber grund­sätz­lich kann man Grid benut­zen.

  8. Sicher, dass IE11 und vor allem Edge „nichts damit anfan­gen kön­nen“?

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

  9. Ich selbst hab’s noch nicht getes­tet, aber cani­u­se zufol­ge soll Edge ab Version 16 Grid voll­stän­dig unter­stüt­zen:

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

Schreibe einen Kommentar zu Mario Antworten abbrechen

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