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

Beispiel

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

Styling von kleineren Bereichen z.b. Navigation