Модуль 1 · урок 6 з 14
Grid чи Flex
Питання, яке лід майже напевно поставить. Відповідь коротка й перевіряється однією фразою.
Grid — коли розкладку задає батько. Ти знаєш наперед, скільки колонок і рядків, і кладеш дітей у клітинки. Каркас сторінки, сітка карток, форма у дві колонки, таблиця-подібне.
Flex — коли розкладку задає вміст. Дітей скільки прийде, вони шикуються в один ряд або колонку й самі домовляються про місце. Панель кнопок, шапка, рядок бейджів, елемент списку.
| Задача | Що брати | Чому |
|---|---|---|
| Каркас сторінки: шапка, сайдбар, контент | Grid | Дві осі, фіксовані зони |
| Шапка: лого, пошук, аватар | Flex | Один ряд, вміст різної ширини |
| Сітка карток, що переноситься | Grid auto-fit | Однакові колонки без медіазапитів |
| Рядок фільтрів, які можуть переноситись | Flex + wrap | Ширина за вмістом |
| Форма: підпис зліва, поле справа | Grid | Підписи вирівнюються між рядками |
| Кнопка з іконкою й текстом | Flex | Дві речі в ряд по центру |
І головне: їх не обирають назавжди. Нормальний екран — це grid зовні й flex усередині кожної зони. Так і скажи ліду, якщо спитає.