Flexbox vs Grid - So erstellen Sie die gängigsten HTML-Layouts

Es gibt so viele großartige CSS-Ressourcen im gesamten Internet. Aber was ist, wenn Sie nur ein einfaches Layout wollen und es JETZT wollen?

In diesem Artikel beschreibe ich die 5 häufigsten Webseitenlayouts und deren Erstellung mit Flexbox und Grid.

Wie das funktionieren wird

Unter jedem Layout befindet sich ein Link für den vollständigen HTML- und CSS-Code auf CodePen.

Beachten Sie, dass ich SASS zum Erstellen von Stildefinitionen verwende. Wenn Sie dasselbe auf Ihrem lokalen Netzwerk tun möchten, installieren Sie SASS mit:

npm i sass -g 

Grundlegende Kartenvorlage

Ich habe die obige Karte als Basis für das Webseitenlayout verwendet. Es besteht aus drei Elementen in vertikaler Richtung, sodass normale divBlöcke gut funktionieren. Später muss ich jedoch das mittlere Element - den Textabsatz - strecken.

Hier erledigen sowohl Flexbox als auch Grid die Arbeit nahtlos. Ich bevorzuge Flexbox, da es für mich einfacher ist.

Gewinner: Flexbox

CodePen Flexbox, CodePen Grid

Beginnen wir nun mit der Erstellung unserer verschiedenen Layouts.

# 1 Vertikal und horizontal zentrierte Karte

Bei Flexbox benötigen wir ein Element, das horizontal zentriert ist, und ein anderes (das untergeordnete Element), das vertikal zentriert ist.

Die Reihenfolge der Artikel wird durch definiert flex-direction. Wie sich das Element im verfügbaren Speicherplatz positioniert, wird durch align-selfdas Element oder align-itemsdessen übergeordnetes Element festgelegt .

Mit Grid benötigen wir drei Spalten und drei Zeilen. Dann positionieren wir die Karte in der mittleren Zelle.

Die horizontale Zentrierung ist einfach. Wir definieren drei Spalten und ihre Größe, indem grid-template-columns: auto 33% autodie Karte so breit wie 1/3 des sichtbaren Bereichs sein sollte.

Das Problem ist, wir kennen die vertikalen Abmessungen nicht. Wir möchten, dass die obere und untere Reihe den verbleibenden Platz einnehmen, der mit dem Raster nicht möglich ist. Die Karte ist zentriert, ihre Höhe hängt jedoch von der Höhe des Fensters ab.

Wir können dies jedoch mit einem zusätzlichen Wickelelement um die Karte lösen und mit zentrieren margin.

Gewinner: Flexbox

CodePen Flexbox, CodePen Grid

# 2 Zwei Karten vertikal und horizontal zentriert

Oft müssen wir mehr als nur ein Element zentrieren. Diese beiden Karten sollten auch die gleiche Höhe haben, wenn die eine oder andere längeren Text enthält.

Bei Flexbox müssen wir beide Karten in ein anderes Element einwickeln und beide Karten gleichzeitig zentrieren.

Wir können hier nicht verwenden align-items, da dies in diesem Fall für die Y-Achse gilt. Wir müssen definieren, mit wie der verbleibende Raum auf der X-Achse verteilt werden soll justify-content: center. Dadurch wird sichergestellt, dass beide Karten horizontal zentriert sind.

Wenn wir das Problem der variablen Höhe von Grid weglassen, können wir das gleiche Ergebnis auch ohne zusätzliche Umhüllungselemente erzielen. Dieses Mal definieren wir ein Raster mit fünf Spalten mit grid-template-columns: auto 33% 50px 33% auto. Der Rest bleibt derselbe wie im vorherigen Beispiel.

Gewinner: Flexbox

CodePen Flexbox, CodePen Grid

# 3 Mehrere Karten mit gleicher Breite und Höhe

Dies ist ein weiterer typischer Anwendungsfall für Blogs, E-Commerce-Websites oder allgemein jede Website, auf der eine Auflistung angezeigt wird. Wir möchten, dass die Karten die gleiche Breite und Höhe haben. Die Höhe muss aus dem größten Element in der Liste abgeleitet werden.

Dies kann in Flexbox erfolgenmit flex-wrap: wrap. Elemente werden in die nächste Zeile umgebrochen, wenn ihre Breite den verbleibenden Abstand jeder Zeile überschreitet. Dieselbe Höhe bleibt jedoch nur im Bereich einer einzelnen Zeile erhalten, es sei denn, Sie definieren sie explizit.

Gitterzeigt hier seine wahre Kraft. Dieses Layout kann erstellt werden, mit grid-auto-rows: 1frdem für alle Zeilen die gleiche Höhe erzwungen wird.

Gewinner: Grid

CodePen Flexbox, CodePen Grid

# 4 Wechselnder Text und Bilder vertikal und horizontal zentriert

In diesem Beispiel haben wir Text mit CTA-Schaltflächen, der von einem Bild auf der anderen Seite begleitet wird. Beide Komponenten sollten vertikal zentriert sein, da ihre Größe variieren kann.

Dies ist ein Kinderspiel für Flexbox. Jede Zeile ist ein articleElement Aufspaltung in zwei Verpackungsbehälter, .imgund .content. Sie werden für eine gleichmäßige Größenverteilung benötigt ( flex-basis: 50%).

Die vertikale Zentrierung des inneren Inhalts wird durch definiert align-items: center.

Der Wechsel wird erreicht, indem die Richtung der Flexbox bei flex-direction: row-reversejedem ungeraden Artikel umgekehrt wird .

Gitterbehandelt diesen Anwendungsfall auch gut. Wir müssen nicht ein riesiges Gitter definieren, sondern eines für jedes article.

Es definiert gleich breite Spalten, die mit vertikal zentriert werden align-items: center.

Der Wechsel wird auf Zellebene durch geschaltete Werte für definiert grid-column.

Gewinner: Krawatte

CodePen Flexbox, CodePen Grid

# 5 Horizontale Kopfzeile mit Menü

Um dieses Design mit Flexbox zu erreichen, müssen beide Seiten des Headers durch ein einzelnes Element dargestellt werden.

Das Logo und der Firmenname bilden anchorlinks eins , und das Menü ist ein einzelnes navElement rechts. Flexbox positioniert sie mit justify-content: space-between.

Bei Grid benötigen wir zwei Spalten - eine für das Logo und eine für das Menü. Das Menü ist ein weiteres Raster, das die Größe der Spalten mithilfe gleichmäßig verteilt grid-template-columns: repeat(4, minmax(0, 1fr)).

Das Problem hierbei ist, dass wir, wenn wir dem Menü ein weiteres Element hinzufügen möchten, auch das CSS anpassen müssen.

Gewinner: Flexbox

CodePen Flexbox, CodePen Grid

Und der Gewinner ist...

Das Endergebnis ist 5: 2 zugunsten von Flexbox, dies bedeutet jedoch nicht, dass es der ultimative CSS-Gewinner wird. Es gibt Situationen, in denen Sie das eine oder das andere verwenden müssen, manchmal sogar beide zusammen, um das zu erreichen, was Sie benötigen.

Wenn Sie eine flexible und bedingte Positionierung benötigen, verwenden Sie Flexbox. Wenn Sie Listen oder ähnliche Strukturen erstellen möchten, für die Elemente gleicher Größe oder eine Tabellenform erforderlich sind, verwenden Sie Raster.

Als Front-End-Entwickler kommen Sie nicht davon, beide nicht zu kennen.

Referenzhandbuch Flexbox, Referenzhandbuch Raster

PS Wenn ich ein Layout verpasst habe, das du täglich verwendest, lass es mich auf Twitter wissen und ich bereite eine Fortsetzung vor :-)