В каком случае использовать CSS grid или flexbox
Бывают случаи, когда сложно решить, следует ли использовать для макетов flexbox или CSS-grid. До определенного момента они оба взаимозаменяемы.
Возможно, лучшее и самое короткое определение разницы между Flexbox и CSS grid: Flexbox для одномерного макета. Строка ИЛИ столбец. Grid для двухмерного макета. Строки и столбцы.
Так что, если у нас есть такой случай, достаточно использовать flexbox.
![](/static/storage/279100569818896911205887051713891861473.png)
Между тем, такой случай больше подходит для CSS-grid.
![](/static/storage/179319090089032419454714903275197289784.png)
Однако имейте в виду, что макет flexbox может «перетекать» в несколько строк, если в нем недостаточно места для его элементов. Но это все еще одномерный макет.
![](/static/storage/98141474935594018940294482080961074320.png)
Но если мы посмотрим на такой дизайн, синий прямоугольник установлен на двух измерениях, поэтому CSS-grid - это то, что нужно.
![](/static/storage/114355468299303251490320270512907284666.png)
Кроме того, в этом видео Джен Симмонс объясняет, чем они отличаются, и когда вы должны выбрать один или другой.