CSS - Grid vs Flex

https://www.youtube.com/watch?v=sB-ooIXFTjg

Grid

Mit Grid legt man ein Raster im 2-Dimensionalen Raum an, während Flex für die Aufteilung in einer Richtung gedacht ist. Entweder horizontal (row) oder vertikal (column).

Bei Grid geht es eher um das Anordnen von Bereichen im Verhältnis zueinander. Grundlegendes Layout von Flächen.

• display: grid - Übergeordnetes Grid Container.
• grid-template-wors
• grid-template-columns
• grid-gap
• grid-template-areas

Vorteile

Große Bereiche Positionieren auch vertikal zentriert etc. immer dann wenn der Browser viel übernehmen soll. Positionieren innerhalb der Grid Bereiche

Flex

Flex kümmert sich um die Verteilung von Raum in einer Richtung, also entweder in Spalten oder Reihen (Standard-Einstellung). Da Grid von den Browsern noch nicht so gut unterstützt wird (2019) nimmt man flex auch gerne zur Erstellung von Grids (indem man Flex Container verschachtelt) Beispiel

display: flex
justify-content: space-between
align-items: center

Styling von kleineren Bereichen z.b. Navigation