Ersetzt CSS Grid Flexbox?

Nein. Naja. Größtenteils Nein.

Grid ist viel neuer als Flexbox und hat etwas weniger Browserunterstützung. Deshalb ist es nur logisch, wenn Leute sich fragen, ob CSS Grid Flexbox ersetzen soll.

Um es auf den Punkt zu bringen

1. Grid kann Dinge, die Flexbox nicht kann.
2. Flexbox kann Dinge, die Grid nicht kann.
3. Sie können zusammenarbeiten: Ein Grid-Element kann ein Flexbox-Container sein. Ein Flex-Element kann ein Grid-Container sein.

Obwohl Grid ziemlich neu ist, haben wir zahlreiche Artikel dazu, darunter einen Einführungsartikel, einen Artikel über ein grundlegendes Layout auf verschiedene Arten und einen vollständigen Leitfaden.

Falls Sie die Trompeten noch nicht gehört haben: März 2017 war der Meilenstein für Grid. Es wurde, vollständig unprefixed und einsatzbereit, in Chrome, Opera, Firefox und Safari veröffentlicht. Sogar Edge unterstützt es, wenn auch eine ältere Version des Standards, für die Sie mit der Verwendung von Autoprefixer etwas Unterstützung erhalten können.

Also.

Ersetzt Grid Flexbox?

Es scheint auf den ersten Blick etwas kompliziert. Besonders wenn Sie gerade erst anfangen, die seltsame, fremde Syntax von Flexbox zu verstehen. Jetzt gibt es *eine ganz andere* Syntax zu lernen? Donnerwetter.

Hier sind einige Dinge, bei denen Grid *speziell* besser ist als Flexbox

• Erstellung ganzer Seitenlayouts. Dafür ist es besser geeignet, selbst unter Berücksichtigung von Layout-Performance-Gründen.
• Erstellung buchstäblicher Grids. Wie X Spalten mit Y Abstand dazwischen, wie man es von homegrown Frameworks kennt. grid-gap ist wunderbar, da Lücken der Hauptschmerzpunkt von Grid-Systemen sind.
• Weniger Medienabfrage-Interventionen mit wirklich leistungsstarker Funktionalität wie Auto-Layout, minmax(), repeat() und auto-fill. Hier ist eine nette Idee.

Und ein weiterer großer Punkt: Grid kann Elemente in 2 Dimensionen positionieren. Sowohl Spalten als auch Zeilen. Das ist eine Premiere. Rachel Andrew hat das einmal sehr deutlich gemacht

Flexbox ist im Wesentlichen für das Layout von Elementen in einer einzigen Dimension – in einer Zeile ODER einer Spalte. Grid ist für das Layout von Elementen in zwei Dimensionen – Zeilen UND Spalten.

Schauen wir uns ein paar Demos an.

Nehmen wir an, wir bauen eine horizontale Navigationskomponente – das ist der perfekte Anwendungsfall für Flexbox, da es Inhalte nur in einer Richtung setzt. In Chris' Demo unten können Sie mit diesen Eigenschaften experimentieren und sehen, wie leistungsfähig Flexbox ist

Siehe den Pen Bar Navigation mit Flexbox und SVG-Icons von Chris Coyier (@chriscoyier) auf CodePen.

Es gibt jedoch einige Fälle, in denen diese Flexbox-Eigenschaften, wie justify-content oder align-items, in Verbindung mit Grid-Eigenschaften verwendet werden sollten. Nehmen Sie diese Demo zum Beispiel

Siehe den Pen Flexbox und Grid  – Erste Demo von Robin Rendle (@robinrendle) auf CodePen.

Zuerst haben wir einen .wrapper erstellt, der auf display: flex; gesetzt ist. So können wir eine maximale Breite für unser .grid festlegen und justify-content: center; verwenden, um es in der Mitte des Viewports zu platzieren. Dann können wir unser Grid mit der richtigen Anzahl von Spalten erstellen

.wrapper {
  display: flex;
  justify-content: center;
}

.grid {
  display: grid;
  max-width: 800px;
  grid-template-columns: 1fr 2fr;
}

Das ist nur der erste Schritt.

Machen wir nun, dass das .ad die gesamte Zeile unseres Grids einnimmt. Nun, das können wir tun, indem wir spezifisch unser ansprechen

ohne den Rest der Kinder unseres Grids zu beeinträchtigen

.ad {
  grid-column-start: 1;
  grid-column-end: 3;
}

Mit dem obigen Code sagen wir: *„Beginne dieses Div in der ersten Spalte und ende in der allerletzten Spalte.“* Das sollte ungefähr so aussehen

Siehe den Pen Flexbox und Grid von Robin Rendle (@robinrendle) auf CodePen.

Darüber hinaus wollen wir, dass unser Ad-Block immer doppelt so groß ist wie unsere erste Zeile – das können wir total machen! Wir müssen nur die Eigenschaft grid-template-rows verwenden

.grid {
  display: grid;
  max-width: 800px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 2fr 1fr;
}

Das ist gleichbedeutend mit: *„Es gibt drei Zeilen in unserem Grid. Achten Sie immer darauf, dass die zweite Zeile doppelt so groß ist wie die erste und dritte.“* Mit anderen Worten, wir schaffen Beziehungen zwischen Zeilen und anderen Zeilen und definieren gleichzeitig die Anzahl der Spalten in unserem Grid!

Siehe den Pen Flexbox und Grid von Robin Rendle (@robinrendle) auf CodePen.

Mit CSS Grid können wir Beziehungen horizontal (mit grid-template-columns) und vertikal (mit grid-template-rows) gleichzeitig festlegen. Flexbox hingegen ist darauf beschränkt, entweder vertikale oder horizontale Layouts zu erstellen (mit flex-direction) – aber das bedeutet nicht, dass wir es aufgeben sollten.

Potenziell verwirrend: Ein „2D“-Layout mit Flexbox

Was etwas verwirrend sein kann, ist, dass es nicht unmöglich ist, mehrdimensionale Layouts nur mit Flexbox zu erstellen. Zum Beispiel

Siehe den Pen Ein „Grid“ mit Flexbox von Chris Coyier (@chriscoyier) auf CodePen.

Dort gibt es sicherlich Zeilen und Spalten, sogar ein letztes Element, das sich über mehrere Spalten erstreckt. Es ist einfach zu erstellen und flexibel. Es wird durch die Erlaubnis von flex-wrap auf dem Container, die flex-basis der Kinder auf 1/3 der Breite des Containers und die Erlaubnis von flex-grow, um Kinder bei Bedarf zu strecken, erreicht. (Die flex-Eigenschaft ist eine Kurzform für flex-grow, flex-shrink und flex-basis.)

Es ist nicht falsch, es ist nur eine Methode, etwas auf diese Weise zu tun, und man könnte wahrscheinlich argumentieren, dass es weniger intuitiv und anpassungsfähig ist.

Potenziell verwirrend: Ein „1D“-Layout mit Grid

Grid *kann* 2D-Layout, d. h. die Definition von grid-template-rows und grid-template-columns, aber es muss nicht beides verwenden. Hier ist eine Demo, wie man es nur verwendet, um Boxen in einer horizontalen Reihe anzuordnen

Siehe den Pen Einfache Spalten mit Grid von Chris Coyier (@chriscoyier) auf CodePen.

Das ist auch nicht falsch. Tatsächlich könnte man leicht argumentieren, dass dies einfacher zu verstehen und prägnanter ausgedrückt ist als die Verwendung von Flexbox. Zum Beispiel sind keinerlei Layout-Eigenschaften auf den Kindelementen erforderlich. Aber man könnte auch argumentieren, dass reines 1D-Layout wie dieses in Flexbox leistungsfähiger ist, da Flexbox es uns ermöglicht, diese Elemente einfacher zu bewegen (z. B. sie alle auf eine Seite zu verschieben, ihre Reihenfolge zu ändern, sie gleichmäßig zu verteilen usw.).

Zum Thema Verschachtelung

Noch einmal, um es zu festigen!

Das sollte man sich merken: Grid-Elemente können Flex-Eltern sein.

Siehe den Pen Einfache Spalten mit Grid von Chris Coyier (@chriscoyier) auf CodePen.

Und Flex-Elemente können Grid-Eltern sein

Siehe den Pen Einfache Spalten mit Grid von Chris Coyier (@chriscoyier) auf CodePen.