Vor ein paar Jahren setzte ich mich hin, um ein Dashboard zu erstellen. Nichts Besonderes – nur eine feste Seitenleiste, einen Hauptinhaltsbereich und einen Footer.

Vor ein paar Jahren setzte ich mich hin, um ein Dashboard zu bauen. Nichts Besonderes – nur eine feste Sidebar, einen Hauptinhaltsbereich und einen Footer. Flexbox schien die offensichtliche Wahl zu sein, und anfangs funktionierte auch alles wie geplant. Dann fügte ich eine Reihe von Karten im Hauptbereich ein. Das gesamte Layout brach zusammen. Die nächsten drei Stunden verbrachte ich damit, gegen flex-grow-Verhältnisse und verschachtelte Prozentbreiten zu kämpfen, während ich zusehen musste, wie sich Container weigerten, sich auszurichten, egal wie viel Padding ich entfernte. Die Seite fühlte sich an wie ein Turm, der kurz vor dem Einsturz steht.

Diese schmerzhafte Erfahrung lehrte mich das Wichtigste über modernes CSS-Layout: Flexbox und Grid sind keine Rivalen. Sie sind Werkzeuge für unterschiedliche Aufgaben, und die meisten misslungenen Layouts entstehen, weil man das falsche Werkzeug wählt.

Der Unterschied ist die Dimension

Stellen Sie sich Flexbox wie einen Flur vor. Elemente fließen in eine Richtung, entweder als Zeile oder als Spalte. Es ist für die eindimensionale Verteilung konzipiert. Der Browser betrachtet den Inhalt und entscheidet dann, wie er entlang dieser einen Achse gestreckt, geschrumpft oder ausgerichtet wird. Das macht Flexbox perfekt für Situationen, in denen der Inhalt das Layout vorgibt. Eine Navigationsleiste, ein Stapel von Formularfeldern oder eine Reihe von Tags, die einen gleichen Abstand benötigen, lassen sich ganz natürlich in einem Flex-Container unterbringen, da sie einer gemeinsamen Logik folgen.

Grid hingegen ist ein Grundriss. Es ist strikt zweidimensional und verarbeitet Zeilen und Spalten gleichzeitig. Sie definieren zuerst die Struktur und platzieren dann die Elemente darin. Das macht Grid ideal für die Gesamtarchitektur einer Seite – überall dort, wo Sie vertikale und horizontale Positionierung gemeinsam steuern müssen. Wenn Sie versuchen, ein komplexes zweidimensionales Design durch verschachtelte Flexbox-Container zu erzwingen, enden Sie bei tief verschachteltem Markup, fragilen Wrappern und einer brüchigen Mathematik, die in sich zusammenbricht, sobald Sie ein einziges zusätzliches Element hinzufügen.

Flexbox hat nach wie vor seine Daseinsberechtigung

Überstürzen Sie nicht den Ersatz jedes Flex-Containers durch Grid. Innerhalb einzelner Komponenten ist Flexbox oft sauberer und intuitiver. Wenn Sie einen Card-Footer mit zwei Schaltflächen haben und eine links und die andere rechts ausrichten möchten, erledigt justify-content: space-between genau das, was Sie beabsichtigen. Wenn Sie ein Icon innerhalb einer Schaltfläche unbekannter Höhe vertikal zentrieren müssen, ist align-items: center der einfachste Weg. Variabler Inhalt – wie eine Reihe von Benutzer-Badges mit unterschiedlichen Namenslängen – lässt sich bequem in Flexbox unterbringen, da es „Content-first“ arbeitet. Der Container passt sich dem an, was er enthält.

Grid ist „Container-first“. Sie sagen dem Browser, wie viele Spuren existieren und wie groß sie sein sollen, und werfen dann die Elemente in diese Zellen. Wenn Ihr Layout im Grunde nur eine einzige Zeile von Geschwistern ist, die sich den Platz teilen, ist Grid unnötiger Aufwand.

Das Seitenlayout gehört Grid

Hier übernimmt Grid das Kommando. Erinnern Sie sich an meinen Dashboard-Albtraum? So hätte die Struktur von Anfang an aussehen sollen:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

Schauen Sie, was hier passiert. Der .page-Container legt drei Zeilen und zwei Spalten fest. Die erste Zeile passt ihre Größe dank auto dem Inhalt des Headers an. Die mittlere Zeile beansprucht mit 1fr den gesamten verfügbaren Restplatz. Der Footer landet in der letzten Zeile, wobei seine Größe durch seinen eigenen Inhalt bestimmt wird. Währenddessen ist die Sidebar auf 200 Pixel Breite fixiert, und der Hauptbereich füllt den Rest aus.

Die Platzierungslogik ist die eigentliche Erleichterung. Der Header erstreckt sich von Spaltenlinie 1 bis zur Linie -1, was bedeutet, dass er sich über beide Spalten erstreckt, egal wie viele Spalten Sie später hinzufügen. Die Sidebar und der Hauptinhalt teilen sich Zeile 2, belegen aber separate Spalten. Der Footer kehrt in Zeile 3 zur vollen Breite zurück. Sie benötigen keine Prozentrechnung bei den Kindelementen. Sie benötigen keine verschachtelten Wrapper, die um die Höhe kämpfen. Ändern Sie die Breite der Sidebar an einer einzigen Stelle, und der Hauptbereich passt sich automatisch an. Das gesamte Layout atmet als ein zusammenhängendes System.

Lesbarkeit mit grid-template-areas

Für noch mehr Klarheit können Sie Ihren Abschnitten Namen geben. Anstatt Zeilennummern zu verwalten, schreiben Sie eine visuelle Karte:

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }

Jetzt liest sich Ihr Stylesheet wie ein Wireframe. Wenn Sie möchten, dass die Sidebar bei einem anderen Breakpoint auf der rechten Seite erscheint, tauschen Sie einfach zwei Wörter im Template-String aus. Diese Art von struktureller Lesbarkeit ist in einem Turm aus verschachtelten Flex-Containern unmöglich zu erreichen.

Zwei harte Lektionen

Grid ist keine Magie. Es gibt zwei Fehler, die Ihr Layout schnell ruinieren werden.

Der erste Punkt ist ein nachlässiger Umgang mit Einheiten. Wenn Sie grid-template-columns: 1fr 1fr 1fr definieren, Ihr Design aber nur zwei Spalten mit Inhalt benötigt, existiert dieser dritte Track weiterhin. Er wird entweder leer bleiben und eine unerwartete Lücke erzeugen, oder er wird Ihren eigentlichen Inhalt dazu zwingen, sich auf eine Weise zu quetschen, die Ihr Design zerstört. Gehen Sie gezielt vor. Wenn Sie zwei Spalten meinen, schreiben Sie repeat(2, 1fr).