Сравнение по критериям
| Критерий | Flexbox | Grid |
|---|---|---|
| Размерность | Одномерный (1D) — одна ось | Двумерный (2D) — строки и колонки |
| Кто диктует раскладку | Контент (элементы) | Контейнер (сетка) |
| Включение | display: flex | display: grid |
| Главные свойства | justify-content, align-items, flex | grid-template-columns/rows, grid-area |
| Промежутки | gap | gap |
| Перенос | flex-wrap (линия рвётся, но не выравнивается в колонки) | Сетка задаёт колонки сразу, ряды ровные |
| Типичная задача | Навбар, ряд кнопок, тулбар, центрирование | Каркас страницы, галерея карточек, сложные сетки |
Что выбрать под задачу
| Задача | Лучше Flexbox | Лучше Grid |
|---|---|---|
| Навбар / меню в один ряд | ✅ Да | Избыточно |
| Центрирование одного блока | ✅ Да | Можно |
| Ряд тегов / кнопок | ✅ Да | Избыточно |
| Каркас страницы (шапка/сайдбар/контент/футер) | Сложно | ✅ Да |
| Галерея карточек строками и колонками | Криво (flex-wrap) | ✅ Да |
| Содержимое внутри одной ячейки | ✅ Да | — |
Правило выбора: «линия» → Flexbox, «сетка» → Grid. Если сомневаешься,
начни с Flexbox; как только появляется потребность выровнять элементы и по горизонтали, и по вертикали
одновременно — переходи на Grid.
Как проверять в DevTools
Откройте F12, выберите контейнер. Рядом с элементом появится бейдж flex или grid —
нажмите его, чтобы включить overlay: для Grid видны линии, треки и gap; для Flexbox — оси и распределение.