CSS Grid oder Flexbox: Was ist besser zum Erstellen von Spalten?

.flex-container { 
  display: flex; 
} 

.flex-container { 
  display: flex; 
  flex-wrap: wrap; 
} 

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:

Wie erkenne ich, ob ich auf Facebook gesperrt wurde?

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. Grid</h1> 
 
<header class="flex"> 
  <h2>Flexbox</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 
</header> 
 
<header class="grid"> 
  <h2>Grid</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></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) solid black; 
  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. Grids</h1> 
 
<section class="cards"> 
  <h2>Some cards</h2> 
 
  <div class="columns"> 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">A Longer Title Than Others</h3> 
 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere 
         excepturi sit ea dolores totam veniam qui voluptates commodi, 
         perferendis et!</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </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.