CSS-Layouts: Display Grid, Flexbox und Co. erklärt

Hinweis: Bevor du dich mit den Layouttechniken vertraut machst, solltest du bereits ein Grundverständnis von HTML und CSS haben. Lies dazu bitte die Tutorials Einstieg in HTML und Einstieg in CSS und komme hier dann wieder zurück.

Flow-Layout (normaler Fluss)

Das CSS-Flow-Layout beschreibt, wie HTML-Elemente im normalen Fluss auf einer Webseite ohne dein Zutun angeordnet werden. Maßgeblich für die Reihenfolge ist dabei zunächst die Reihenfolge im Quellcode. Bei HTML-Elementen unterscheidet man darüber hinaus zwischen Block-Elementen und Inline-Elementen.

Block-Elemente

Block-Elemente erscheinen untereinander und haben eine Breite von 100 Prozent. Dazu gehören: u. a. <div>, <p>, <h1>, <ul>, <li>.

Inline-Elemente

Im Gegensatz zu Block-Elementen erscheinen Inline-Elemente wie einzelne Wörter in einem Absatz nebeneinander und sind nur so breit wie ihr Inhalt. Dazu gehören: u. a. <span>, <a>, <img>, <strong>, <em>.

Schauen wir uns einmal beide Elemente im Vergleich an:

Auch die Leserichtung bestimmt, wie Inline-Elemente auf der Seite angeordnet werden. Während in der deutschen und englischen Sprache Wörter von links nach rechts angeordnet werden, ist dies in anderen Sprachen wie Arabisch oder Hebräisch umgekehrt.

Display-Eigenschaft

Jedes HTML-Element hat die Eigenschaft display, die festlegt, wie das Element auf der Seite angezeigt wird. Block-Elemente haben dabei im normalen Fluss den Wert block, Inline-Elemente den Wert inline. Das kannst du aber auch ändern, um das Layout deiner Seite zu beeinflussen.

Ein Link innerhalb eines Absatzes wird standardmäßig inline angezeigt, da das <a>-Element mit display: inline vorbelegt ist. Wenn du eine ganze Gruppe von HTML-Elementen verlinken möchtest, solltest du den Wert auf display: block ändern, damit dieser wie ein Block-Element behandelt wird und in eine neue Zeile umbricht. Denn bei Inline-Elementen kann die Höhe und Breite nicht verändernt werden, da diese durch ihren Inhalt bestimmt werden.

<p>
  Lies bitte das Tutorial <a href="/tutorials/einstieg-in-html">Einstieg in HTML</a>.
</p>

<a href="/tutorials/einstieg-in-html" class="card">
  <h3>Einstieg in HTML</h3>
  <img src="/images/tutorials/html-logo.png" alt="HTML-Logo" />
</a>

/* Alle Links mit einem href-Attribut */
:any-link { display: inline; text-decoration: underline; }

/* Nur unsere Karte */
.card { display: block; text-decoration: none; }

Die display-Eigenschaft verfügt neben block und inline über weitere Werte, die das Layout beeinflussen. Die wichtigsten sind flex und grid, mit denen du komplexe Layouts erstellen kannst.

Flexbox

Flexbox ist eine eindimensionale Layouttechnik, Elemente horizontal in einer Zeile oder vertikal in einer Spalte anzuordnen. Dabei wird das übergeordnete Element als Flex-Container bezeichnet, während die darin enthaltenen Elemente als Flex-Items bezeichnet werden. Die display: flex-Eigenschaft wird auf dem Flex-Container angewendet, um die Flexbox zu aktivieren.

Möchtest du beispielsweise in deinem Header das Logo links und die Navigation rechts platzieren, kannst du das mit Flexbox einfach umsetzen:

<header class="site-header">
  <div>Logo</div>
  <nav>Navigation</nav>
</header>

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Damit das Logo und die Navigation am Ende tatächlich links und rechts platziert werden, benötigst du noch weitere Eigenschaften: justify-content ordnet die Elemente auf der Hauptachse an, align-items auf der Querachse.

Haupt- und Querachse

In Flexbox gibt es zwei Achsen. Die Hauptachse verläuft in unserer Leserichtung horizontal, die Querachse steht dazu im rechten Winkel, also vertikal. Du kannst die Richtung der Achsen auch verändern. Bei flex-direction: row verläuft die Hauptachse horizontal, bei flex-direction: column vertikal.

Josh Comeau hat einen interaktiven Leitfaden zu Flexbox erstellt, der dir die wichtigsten Eigenschaften und deren Anwendung näherbringt. Auf der Seite Dokumentation habe ich dir weitere Links zusammengestellt.

Grid-Layout

Während Flexbox für ein eindimensionales Layout ausgelegt ist, ist das Grid-Layout für zwei Dimensionen ausgelegt, also für die Anordnung von Elementen in Zeilen und Spalten. Die Möglichkeiten von CSS Grid sind vielfältig, gleichzeitig aber auch sehr komplex.

Ähnlich wie bei Flexbox aktivieren wir das Grid-Layout beim übergeordneten Element mit der Eigenschaft display: grid. Schauen wir uns folgendes Beispiel an:

<div class="grid">
  <div>#1</div>
  <div>#2</div>
  <div>#3</div>
  <div>#4</div>
  <div class="wide">#5</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 100px;
  gap: 0.6em;

  .wide {
    grid-column: span 2;
  }
}

Das Beispiel enhält ein Raster mit drei Spalten (grid-template-columns) und zwei Zeilen (grid-template-rows). Mit der Anzahl der Werte teilen wir dem Browser jeweils mit, wie viele Spalten bzw. Zeilen wir haben möchten.

Die Einheit der Werte bestimmt dabei dann dessen Breite oder Höhe. Die Maßeinheit fr steht für „Fractional Unit“ (Bruchteilseinheit). Mit mehreren 1fr teilst du den verfügbaren Platz in gleich große Teile auf. Bei drei Spalten erhält jede Spalte also ein Drittel (33,333 %) des verfügbaren Platzes.

Mit absoluten Werten wie 100px oder relativen Werten wie 10em kannst du die Größe der Spalten oder Zeilen auch direkt vorbelegen. Das ist besonders dann sinnvoll, wenn du eine feste Breite oder Höhe benötigst, die sich nicht an den verfügbaren Platz anpassen soll.

Das gap-Attribut sorgt für einen Abstand zwischen den Elementen. Mit grid-column: span 2 wird das fünfte Element über zwei Spalten dargestellt.

Flexible Layouts ohne Breakpoints¹

Mit CSS Grid können wir auch flexible Layouts erstellen, bei denen wir dem Browser überlassen, wie viele Spalten er nebeneinander darstellen soll. Das ist besonders nützlich für responsive Layouts, bei denen wir keine festen Breakpoints definieren möchten.

In dem folgenden Beispiel wollen wir Spalten mit einer Mindestbreite von 200 Pixeln und einer maximalen Breite von einer Fractional Unit (fr) darstellen. Das bedeutet, dass die Spalten mindestens 200 Pixel breit sind, sich aber auch an den verfügbaren Platz anpassen können. Mit auto-fit teilen wir dem Browser mit, dass er so viele Spalten nebeneinander darstellen soll, wie es der verfügbare Platz zulässt.

Verändere im folgenden Beispiel in der interaktiven Demo die Mindestbreite mit dem Schieberegler, um zu verstehen, wie sich das auf das Flex-Layout auswirkt.

<div class="grid">
  <div>#1</div>
  <div>#2</div>
  <div>#3</div>
  <div>#4</div>
  <div>#5</div>
  <div>#6</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6em;
}

Auch für CSS Grid hat Josh Comeau einen interaktiven Leitfaden erstellt, der dir die wichtigsten Eigenschaften und deren Anwendung näherbringt.

Floats

Ein gefloatetes Element ändert das Verhalten vom Element und den umliegenden Elementen im normalem Fluss. Das Element wird dabei nach links oder rechts verschoben und aus dem normalen Fluss entfernt, sodass der umliegende Inhalt um das Element herumfließt.

Klingt komplizierter als es ist. In dem folgenden Beispiel wollen wir zwei Absätze um ein Bild herumfließen lassen. Das ist mit der Eigenschaft float: left oder float: right auf dem Bild möglich.

<div>
  <div class="image">Image</div>
  <p>Lorem ipsum …</p>
  <p>Lorem ipsum …</p>
</div>

.image {
  float: left;
  block-size: 100px;
  aspect-ratio: 1 / 1;
  margin-inline-end: 1rem;
  border-radius: 50%;
}

Wenn du ein Element mit float verschiebst, kann das zu unerwarteten Ergebnissen führen, insbesondere wenn die Höhe des gefloateten Elements nicht explizit festgelegt ist. Der Browser kann das übergeordnete Element eines gefloateten Elements nicht automatisch anpassen, was dazu führt, dass dieses „kollabiert“ und keine sichtbare Höhe hat.

Die Eigenschaft display: flow-root; am Elternelement behebt dieses Problem, indem es einen neuen Kontext für die Blockformatierung erstellt. Unabhängig davon wird die float-Eigenschaft heute nur noch selten verwendet, da wir mit Flexbox und Grid für die meisten Anforderungen geeignetere Alternativen haben.

Positionierung

Mit der Positionierung durch die Eigenschaft position kannst du einzelne Elemente von der Stelle, an der sie sonst im normalen Fluss platziert wären, an eine andere Stelle platzieren. Ähnlich wie einen Klebezettel, den du aufnimmst und dort hinklebst, wo du ihn haben möchtest. Folgende Werte sind dabei möglich:

position: static

Das Element wird im normalen Fluss angezeigt (Standard).

position: relative

Das Element wird relativ zu seiner ursprünglichen Position verschoben.

position: absolute

Das Element wird vollständig aus dem normalen Fluss herausgelöst, so als befände es sich auf einer seperaten Ebene. Nachfolgende Elemente rutschen nach oben.

position: fixed

Das Element wird relativ zum Viewport positioniert und bleibt immer an der gleichen Stelle, auch wenn du durch die Seite scrollst. Der Header auf dieser Website ist so platziert.

position: sticky

Das Element bleibt beim scrollen der Seite innerhalb seines übergeordneten Elements platziert, bis dessen unterer Rand erreicht ist. Auf dieser Website kannst du das beim rechts platzierten Inhaltsverzeichnis auf größeren Displays beobachten.

<div class="product">
  …
  <div class="new">Neu eingetroffen</div>
</div>

.product {
  position: relative; /* Setzt den Nullpunkt zurück */
}

.new {
  position: absolute;
  inset-block-start: 0; /* Y-Koordinate */
  inset-inline-end: 0;  /* X-Koordinate */
  z-index: 2; /* Ebene */
}

Die Angabe von position: absolute bewirkt zunächst erst einmal nichts, also fügen wir noch die Eigenschaften block-start und inline-start hinzu. Diese bestimmen die Position des Elements auf der Y- und X-Achse.

inset-block-start und inset-inline-end sind die logische Eigenschaften von top und right, mit denen du vielleicht mehr anfangen kannst. Mit ihnen ist der relative Abstand des Elements zum übergeordneten Element gemeint. Der Nullpunkt für die Koordinaten ist dabei die linke obere Ecke des übergeordneten Elements, oder in diesem Fall die rechte obere Ecke, da wir hier inset-inline-end statt inset-inline-start bzw. left benutzt haben.

Ohne die Angabe von position: relative beim übergeordneten Element würde das absolut positionierte Element relativ zum Viewport² positioniert werden. Das ist in den meisten Fällen nicht das gewünschte Verhalten. Mit dieser Eigenschaft setzen wir quasi für das übergeordneten Element einen neuen Nullpunkt, sodass sich das absolut poisitionierte Element daran ausrichtet.

Mehrspalten-Layout

Das CSS-Modul für mehrspaltiges Layout bietet eine einfache Möglichkeit, Inhalte in Spalten anzuordnen, ähnlich wie der Text in einer Zeitung.

Um einen Block in einen mehrspaltigen Container zu verwandeln, kannst du die Eigenschaften column-count oder column-width verwenden.

Mit column-count teilst du dem Browser mit, wie viele Spalten du haben möchtest. Mit column-width teilst du dem Browser mit, dass er den Container mit so vielen Spalten wie möglich einer bestimmten Breite füllen soll.

In dem folgenden Beispiel haben wir die Breite auf 20 Zeichen (ch) festgelegt.

<div class="columns">
  <h2>Mehrspaltiges Layout</h2>
  <p>Lorem ipsum&#x202f;…</p>
  <p>Lorem ipsum&#x202f;…</p>
  <p>Lorem ipsum&#x202f;…</p>
</div>

.columns {
  column-width: 20ch;
}

Vorsicht: Vermeide Spalten, wenn der Inhalt nur lesbar wäre, wenn dafür rauf- und runtergescrollen müsste. Das wäre eine schlechte Usability.

Meine Empfehlung für dein Layout

Gibt es das pefekte Layout für alle Einsatzbereiche? Nein, das wäre zu einfach. Tatsächlich führen mehrere Wege nach Rom, wie ich immer gern sage. Die eine Lösung kann funktonieren, die andere vielleicht nur mit etwas mehr Aufwand.

Grundsätzlich würde ich dir aber folgendes gern mit auf dem Weg geben:

• Vertraue auf den normalen Fluss, wenn es geht. Das ist die einfachste und zuverlässigste Art, um insbesondere auch bei mobilen Endgeräten einen linearen Lesefluss zu gewährleisten.
• Flexbox ist super, wenn du einfach nur zwei oder mehr Elemente neben- oder untereinander platzieren möchtest. Das ist besonders für Navigationen oder für eine Gruppierung von Elementen geeignet.
• Das Grid-Layout ist sehr umfangreich, da sind deiner Kreativität kaum Grenzen gesetzt. Wenn du fertige Codeschnipsel hast, die eine Aufgabe für dich erledigen sollen, nehme die. Bei einer eigenen Lösung solltest du dich allerdings noch tiefer mit der Materie befassen, indem du die Dokumentation liest.
• Am Ende bleibt dann noch die Positionierung, mit der du recht spärlich umgehen solltest, um ein Chaos zu vermeiden. Die Positionierung ist allerdings unabdingbar, wenn du Elemente irgendwohin „kleben“ möchtest, wie die Navigation oder ein Inhaltsverzeichnis, wie auf dieser Seite.

Ich hoffe, ich konnte dir eine gute Zusammenfassung der wichtigsten Layouttechniken in CSS geben. Damit solltest du in der Lage sein, die meisten Layouts zu erstellen, die du für deine Website benötigst. Ich bin gespannt auf die Ergebnisse, wünsche dir in jedem Fall viel Spaß beim ausprobieren!

Wenn dir dieses Tutorial gefallen hat, wir haben noch viel mehr Tutorials. Teile es doch auch gern mit deinen Kontakten auf Social Media. 👍 🎉

• Verwendete Tags:
• css