Entdecken Sie die Unterschiede zwischen diesen modernen CSS-Layoutmethoden anhand eines praktischen Problems: dem Anordnen von Spalten.
Wenn es um CSS-Layouts geht, stehen Ihnen vor allem zwei Tools zur Verfügung: Grid und Flexbox. Obwohl beide großartig darin sind, Layouts zu erstellen, dienen sie unterschiedlichen Zwecken und haben unterschiedliche Stärken und Schwächen.
Erfahren Sie, wie sich beide Layoutmethoden verhalten und wann Sie sie übereinander verwenden sollten.
Das unterschiedliche Verhalten von CSS Flexbox und Grid
Um die Dinge zu visualisieren, erstellen Sie eine index.html Datei in Ihrem bevorzugten Ordner und fügen Sie das folgende Markup ein:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
Lorem ipsum dolor sit amet.div>
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
Beide Divs enthalten genau die gleichen untergeordneten Elemente, sodass Sie auf jedes ein anderes System anwenden und sie vergleichen können.
Sie können auch sehen, dass der HTML-Code eine Stylesheet-Datei mit dem Namen importiert style.css. Erstellen Sie diese Datei im selben Ordner wie index.html und fügen Sie die folgenden Stile ein:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Ihre Seite sollte so aussehen:
Nun zum ersten Mal in eine Flex-Spalte einfügen möchten, fügen Sie einfach den folgenden Code zu Ihrem Stylesheet hinzu:
.flex-container {
display: flex;
}
Das ist das Ergebnis:
Der Flex-Container div ordnet seine untergeordneten Elemente jetzt in Spalten an. Diese Spalten sind flexibel und reaktionsschnell – sie passen ihre Breite an den verfügbaren Platz im Ansichtsfenster an. Dieses Verhalten ist eines der wichtigsten Grundkonzepte hinter Flexbox.
Um ein Überlaufen der Spalten in der zu verhindern Flex-Container, du kannst den... benutzen Flexfolie Eigentum:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Wenn nicht genügend Platz für die untergeordneten Elemente in einer Zeile vorhanden ist, werden sie jetzt umbrochen und in der nächsten Zeile fortgesetzt.
Wenden Sie nun ein Rasterlayout auf das zweite an mit diesem CSS:
.grid-container {
display: grid;
}
Mit der obigen Deklaration allein passiert nichts, da das Standardverhalten von Grid übereinander gestapelte Zeilen erstellt.
Um zu einer Spaltenanzeige zu wechseln, müssen Sie die ändern Grid-Auto-Flow Eigentum (das ist Reihe standardmäßig):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Hier nun das Ergebnis:
Um die genaue Anzahl der gewünschten Spalten in jeder Zeile anzugeben, verwenden Sie Rastervorlagenspalten:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Dieser Wert erstellt fünf Spalten gleicher Breite. Um ein Wrapping-Verhalten ähnlich wie bei Flexbox zu erhalten, können Sie reaktionsfähige Eigenschaften wie verwenden automatisch anpassen Und Minimal Maximal:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Flexbox und Grid werden oft als eindimensional bzw. zweidimensional bezeichnet. Das ist jedoch nicht die ganze Wahrheit, denn sowohl Flexbox als auch Grid können einen machen zweidimensionales Layoutsystem. Sie tun es einfach auf unterschiedliche Weise und mit unterschiedlichen Einschränkungen.
Am wichtigsten ist die Art und Weise, wie Sie den eindimensionalen Aspekt des Layouts steuern können. Betrachten Sie zum Beispiel das folgende Bild:
Beobachten Sie, wie konsistent die Rasterspalte ist und wie ungleichmäßig jede Spalte in der Flexbox ist. Jede Zeile/Spalte in einem Flex-Container ist unabhängig voneinander. Daher sind einige möglicherweise größer als andere, abhängig von der Größe ihres Inhalts. Dabei handelt es sich weniger um Spalten als vielmehr um unabhängige Blöcke.
Raster funktioniert anders, indem ein 2D-Raster mit standardmäßig gesperrten Spalten eingerichtet wird. Eine Spalte mit kurzem Text hat die gleiche Größe wie eine mit viel längerem Text, wie das obige Bild zeigt.
Zusammenfassend lässt sich sagen, dass CSS Grid etwas strukturierter ist, während Flexbox strukturierter ist flexibles und reaktionsfähiges Layoutsystem. Diese alternativen Layoutsysteme haben einen guten Namen!
Wann sollte man Flexbox verwenden?
Möchten Sie sich auf die intrinsische Größe jeder Spalte/Zeile verlassen, die durch deren Inhalt definiert wird? Oder wünschen Sie sich eine strukturierte Steuerung aus Elternsicht? Wenn Ihre Antwort die erste ist, dann ist Flexbox die perfekte Lösung für Sie.
Um dies zu demonstrieren, stellen Sie sich ein horizontales Navigationsmenü vor. Ersetzen Sie das Markup innerhalb der Tags damit:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Ersetzen Sie das Markup in der CSS-Datei durch Folgendes:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Hier ist das Ergebnis:
Wandeln Sie nun die erste Navigation in ein Flex-Layout und die zweite in ein Raster-Layout um, indem Sie das folgende CSS hinzufügen:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Vergleichen Sie die Ergebnisse, um herauszufinden, welches besser geeignet ist:
Aus dem obigen Bild können Sie ersehen, dass Flexbox in diesem Fall die perfekte Lösung ist. Sie möchten Elemente nebeneinander platzieren und dabei ihre eigentliche Größe beibehalten (groß oder klein, je nach Textlänge). Bei Grid hat jede Zelle eine feste Breite und es sieht nicht so gut aus – zumindest mit Nur-Text-Links.
Wann sollte CSS Grid verwendet werden?
Grid zeichnet sich besonders dann aus, wenn Sie aus dem übergeordneten System ein starres System erstellen möchten. Ein Beispiel ist eine Reihe von Kartenelementen, die gleich breit sein sollten, auch wenn sie unterschiedlich viel Inhalt enthalten.
Ersetzen Sie das Markup innerhalb der Tags damit:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Fügen Sie dieses CSS hinzu:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Sie beginnen mit einer Flexbox-Anzeige, um zu sehen, wie sie aussieht, damit Sie sie mit der Rasteranzeige vergleichen können. Hier ist die Ausgabe:
Beachten Sie, dass die letzte Spalte aufgrund ihrer intrinsischen Größenanpassung größer ist als andere, was Flexbox gut beherrscht. Um sie jedoch mit Flexbox auf die gleiche Breite zu bringen, müssten Sie dieser intrinsischen Größenanpassung entgegenwirken, indem Sie Folgendes hinzufügen:
.columns > * {
flex: 1;
}
Das macht den Trick. Für solche Fälle ist Grid jedoch besser geeignet. Sie geben einfach die Anzahl der Spalten an und schon kann es losgehen:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Hier ist das Ergebnis:
Ein weiterer Vorteil der Verwendung von Grid besteht darin, dass das übergeordnete Element das Layout der untergeordneten Elemente steuert. So können Sie untergeordnete Elemente hinzufügen und entfernen, ohne befürchten zu müssen, dass das Layout beschädigt wird.
Wann sollten Sie Grid oder Flexbox verwenden?
Zusammenfassend lässt sich sagen, dass CSS Grid großartig ist, wenn Sie ein strukturiertes Steuerelement aus der Perspektive des übergeordneten Elements mit gleicher Spaltengröße wünschen, unabhängig von der Größe der einzelnen Inhalte.
Flexbox hingegen ist ideal, wenn Sie ein flexibleres System basierend auf der intrinsischen Größe der Elemente wünschen.