Чим CSS Grid відрізняється від Flexbox?
Коротко
Flexbox - для однієї осі, Grid - для двох.
Різниця по суті
| Що | Flexbox | Grid |
|---|---|---|
| Осі | Одновимірна система (або рядок, або колонка) | Двовимірна система (рядки + колонки одночасно) |
| Коли зручний | Вирівнювати і розподіляти елементи в лінію | Створювати повноцінні макети і сітки |
| Логіка | Контент «сам» формує структуру | Спочатку задається сітка, потім розкладається контент |
| Керування | justify-content і align-items вздовж однієї осі | Чітке керування рядками і колонками (grid-template-*, grid-area) |
| Сценарії | Меню, кнопки, картки в ряд, хедери, елементи в блоці | Галереї, повноцінні макети сторінок, сітки, таблиці, складні дизайни |
Проста формула для запам'ятовування
- Flexbox: потоковий, «елементи самі вибудовуються»
- Grid: «креслення», ти задаєш сітку і розміщуєш елементи за координатами
Підсумок
Flexbox - для вирівнювання всередині рядка або колонки. Grid - для побудови сітки макета.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.