Responsive Design mit CSS: Flexbox oder Grid? (Mit Beispielen)

Facebook
XING
Twitter
Maria Goeppert-Mayer Nobelpreisträgerin CSS Grid Layouts
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?
Anzeige

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.

Flexible Boxen anordnen

Anders als beim Anordnen mit der Float-Eigenschaft, verlangt das Flexbox-Modell ein übergeordnetes Element, welches die Eigenschaften für die Anordnung der darin enthaltenen Kindelemente besitzt:

<div class="flexbox">
  <p>Box 1</p>
  <p>Box 2</p>
  <p>Box 3</p>
</div>

Die drei P-Elemente des eben gezeigten Beispiels sollen nun alle nebeneinander angeordnet werden. Dazu sind folgende Zeilen CSS nötig, die im Elternelement der drei Absätze definiert werden:

div.flexbox {
  display: flexbox;
  flex-flow: row wrap;
}
div.flexbox p {
  width: 100px;
  height: 100px;
}

Über die Eigenschaft „display“ wird das Element als Flexbox definiert. Die Eigenschaft „flex-flow“ gibt an, ob die Kindelemente nebeneinander („row“) oder untereinander („column“) angeordnet werden sollen. Der optionale Wert „wrap“ gibt an, dass die Kindelemente umgebrochen werden sollen, wenn der Platz des Elternelementes nicht ausreicht, um alles in einer Reihe unterbringen zu können. Ohne „wrap“ würden die Kindelemente grundsätzlich ohne Umbruch nebeneinander dargestellt werden.

Den P-Elementen weisen wir nun eine Höhe und Breite von jeweils 100 Pixel zu. Das folgende Bild zeigt, dass bei dem Flexbox-Modell die Float-Problematik nicht auftaucht:

Elemente per Flexbox angeordnet (oben) und per Float-Eigenschaft angeordnet (unten)

Flexible Breite für Boxen

Die Breite der Kindelemente richtet sich entweder nach deren Inhalt oder nach einer Breitenangabe, wie sie hier im Beispiel gemacht wurde. Alternativ besteht die Möglichkeit, einzelne oder alle Kindelemente so auszurichten, dass sie immer die gesamte Breite des Elternelementes ausfüllen:

#flexbox p:nth-child(1) {
  flex: auto;
}

Im Beispiel wird mit „:nth-child(1)“ das erste Kindelement per „flex“ auf automatische Breite gestellt. Das heißt, die Breite des ersten Kindelementes passt sich immer so an, dass alle drei Kindelemente die gesamte zur Verfügung stehende Breite einnehmen. Das zweite und dritte Kindelement wird jeweils mit der angegebenen Breite von 100 Pixel dargestellt.

Flexible Breite des ersten Elementes

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.

Moderne Layouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen.
Die einfache Einteilung eines Weblayouts in Zeilen und Spalten war mit CSS nicht mehr möglich. Mit CSS-Grids kommt die Layouterstellung als Raster zurück – sogar ganz ähnlich, wie es einst mit Tabellen in den Zeiten vor CSS üblich war.

css-grids

Raster vorbereiten

Zunächst einmal muss festgelegt werden, für welchen Bereich eines HTML-Dokumentes CSS-Grids angewendet werden sollen. Will man das gesamte Dokument per CSS-Grids in Raster einteilen und gestalten, sollte das „<body>“-Element als Ausgang genommen werden. Mit der „display“-Eigenschaft werden das Element sowie dessen Kindelemente für die Verwendung von Grids ausgezeichnet.

body {
  display: grid;
}

Im nächsten Schritt wird ein Raster definiert. Per „grid-template-rows“ und „grid-template-columns“ gibt man für jede anzulegende Reihe beziehungsweise Spalte einen Wert ein. Hierbei kann es sich um absolute oder relative Angaben oder das Schlüsselwort „auto“ handeln. Reihen oder Spalten mit dem Wert „auto“ nehmen eine Größe ein, die dafür sorgt, dass das Raster immer den gesamten zur Verfügung stehenden Raum einnimmt.

body {
  grid-template-columns: 300px auto;
  grid-template-rows: 200px auto 200px;
}

Spalten und Zeilen definieren

Ist das Raster definiert, können die darin enthaltenen Kindelemente innerhalb des Rasters verteilt werden. Dazu wird eine sogenannte Grid-Area definiert, innerhalb derer ein Element dargestellt wird. Dieser Bereich benötigt die Angabe einer Start- und Endposition für die Spalte und Zeile.

Die vier Angaben werden über die Eigenschaften „grid-column-start“, „grid-column-end“, „grid-row-start“ und „grid-row-end“ festgelegt. Jeder Eigenschaft wird also eine Zahl oder ein Name zugewiesen, der vorher definiert wurde.

header {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
}
nav {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
}
article {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
}
footer {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 3;
}

Auf diese Weise lassen sich Elemente frei innerhalb des Rasters verteilen. Dabei können einzelne Elemente sich auch überschneiden. Die einzige Einschränkung besteht darin, dass die Bereiche immer ein Rechteck darstellen müssen. Andere Formen sind also nicht möglich.

Im Beispiel wird ein einfaches Standardlayout dargestellt, bei dem die Höhe der ersten und dritten Spalte fest, die der zweiten flexibel ist. Die Breite der ersten Spalte ist ebenfalls fest und die der zweiten flexibel.

css-grids_fr


Raster, welches die gesamte Höhe des Browserfensters einnimmt
Mit „grid-column“ und „grid-row“ gibt es auch Kurzformen, bei denen die Anfangs- und Endposition in einer Eigenschaft jeweils zusammengefasst wird. Getrennt werden die beiden Werte jeweils von einem Schrägstrich.

header {
  grid-column: 1 / 2;
  grid-row: 1;
 }

Ausrichtung von Elementen

Die Gestaltungsmöglichkeiten sind an dieser Stelle noch nicht am Ende. So gibt es auch neue Eigenschaften, mit denen Inhalte innerhalb einer Grid-Area unterschiedlich ausgerichtet werden können.

Denn bislang waren Ausrichtungen per „text-align“ und „vertical-align“ nur für Texte beziehungsweise Tabellen möglich. Um ganze Elemente auszurichten, musste bislang ebenfalls die „float“-Eigenschaft zweckentfremdet werden oder auf eine absolute Platzierung gesetzt werden.

Mit „justify-self“ und „align-self“ gibt es zwei neue Ausrichtungseigenschaften. Erlaubt sind „start“, „end“, „center“ und der Standardwert „stretch“. Auch hier werden die Inhalte entsprechend ausgerichtet.

Während “justify-self” ein Element auf der Horizontalen ausrichtet – zum Beispiel links oder rechts –, ermöglicht “align-self” eine Ausrichtung auf der Vertikalen – zum Beispiel oben oder unten.

Reihenfolge im Raster

Im Prinzip lässt sich das im Beispiel definierte Layout weitestgehend auch mit „klassischen“ CSS-Eigenschaften wie „float“ realisieren. Der Vorteil beim Einsatz von CSS-Grids ist jedoch, dass die Reihenfolge der Auszeichnung der Elemente im Quelltext keinerlei Rolle spielt. Denn jedes Element bekommt mit „grid-column“ und „grid-row“ einen festen Platz innerhalb des Rasters zugewiesen.

Das „<footer>“-Element könnte also vor allen anderen Elementen im Quelltext ausgezeichnet werden. Es würde dennoch in der letzten Zeile des Rasters dargestellt werden.

Gerade bei responsiven Layouts ist es häufig sinnvoll, die Darstellungsreihenfolge einzelner Bereiche für die Mobilansicht umzustellen. Per CSS-Grids ist es ein Leichtes, zum Beispiel die Navigation für die Mobilansicht am Seitenende darzustellen.

Der Browsersupport erlaubt den Einsatz ganz ohne schlechtes Gewissen. Alle modernen Browser unterstützen CSS-Grids zuverlässig.

Weitere Beispiele für CSS-Grid-Layout

News Layout

Hier ein hervorragendes CSS-Grid-Beispiel mit einem 12-Spalten-Layout für eine Nachrichtenseite, mit einer Featured Story ganz oben. Von Marc Müller.

Magazine Layout

Dieses Magazin-Layout verwendet Flexbox, um Retro-Formen, mehrspaltigen Text und ein großes Bild hinzuzufügen. Erstellt von Raisa Yang.

Modular CSS Grid Layout Sections

Von Brian Haferkamp.

CSS Grid Magazine Layout

Von Elzette.

A Piece of Art

Von Michelle Barker.

Dieser Beitrag wurde im April 2018 erstveröffentlicht und im März 2020 überarbeitet.

Anzeige

10 Antworten

  1. 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.

  2. 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.

  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. 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.

  5. 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.

  6. Ich habe Grid in einem Angular-Projekt verwendet, funktioniert super bei fast allen Browsern bis auf IE11, da muss man die grid rows manuell zuordnen, -ms-grid-row: 1 -ms-grid-row: 2 usw, also die automatische Placement der rows ist nicht unterstützt, GROßER NACHTEIL.

Schreibe einen Kommentar

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

Inhaltsverzeichnis

Zum Dr. Web Newsletter anmelden

Kein Spam, nur Benachrichtigungen über neue Produkte und Updates.

Social Media

Meistgelesen

Weitere Kategorien

On Key

Related Posts

Ein junger blonder Mann, der die Füße hochlegt und über sein Geschäft sinniert.

Banking: Brauchen Freelancer ein separates Geschäftskonto?

Gesetzlich vorgeschrieben ist die Trennung von Privat- und Geschäftskonto nicht. Wer als Freelancer auf eigene Rechnung arbeitet, muss also kein zusätzliches Girokonto einrichten. Sinnvoll ist die saubere Trennung von privaten und betrieblichen Zahlungsvorgängen trotzdem. Wir zeigen, worauf es ankommt

Ein schwarzer Tisch mit keyboard, maus, kophoerer, kaffee schwarz.

Die 13 besten HTML Editoren für Webentwickler (Update)

Wer Webseiten entwickeln möchte, braucht einen HTML-Editor. Sicherlich kannst du auch mit Hilfe des Windows-Notepad eine Webseite erstellen – schön und komfortabel geht indes anders. Besonders wichtig bei einem HTML-Editor sind eine gute Einfärbung der Syntax – auch Syntax-Highlighting genannt – und eine brauchbare Code-Vervollständigung.