Пошук уроків, статей та іншого контенту
Керування рядками й стовпцями одночасно — коли Grid природніший вибір, ніж Flexbox.
На відміну від Flexbox (одна вісь за раз), CSS Grid керує рядками й стовпцями одночасно як єдиною сіткою — природний вибір для макетів цілої сторінки (шапка/бічна панель/основний вміст/футер) чи будь-якої розкладки, де важливе вирівнювання елементів і по рядках, і по стовпцях одночасно.
.page-layout {
display: grid;
grid-template-columns: 250px 1fr; /* бічна панель фіксованої ширини + решта простору */
grid-template-rows: auto 1fr auto; /* шапка/контент/футер */
gap: 16px;
}fr (fraction) — одиниця, специфічна для Grid: розподіляє вільний простір, що лишився після фіксованих розмірів, пропорційно вказаним значенням:
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* середня колонка вдвічі ширша за кожну з крайніх */
}Іменування ділянок сітки текстовим шаблоном робить структуру макета читабельною прямо в CSS — видно форму розкладки, не уявляючи її подумки з номерів рядків/стовпців:
.page-layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-areas:
"sidebar header"
"sidebar content"
"sidebar footer";
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.content { grid-area: content; }
.footer { grid-area: footer; }Grid — коли потрібне вирівнювання по обох вимірах одночасно (макет цілої сторінки, галерея зображень із рівними рядами й стовпцями).
Flexbox — коли розташування по суті одновимірне (ряд кнопок, навігаційна панель, вертикальний список карток) — навіть якщо елементи візуально переносяться на кілька рядків через flex-wrap, логічно це один потік, а не сітка з узгодженими рядками й стовпцями.
Grid і Flexbox не взаємовиключні — типовий реальний макет використовує Grid для загальної структури сторінки (шапка/бічна панель/контент) і Flexbox усередині окремих ділянок цієї сітки (наприклад, ряд кнопок у шапці).
Використовувати Grid для простого одновимірного ряду елементів там, де Flexbox простіший і природніший, — Grid не «кращий» узагалі, а підходить для іншого типу задачі.
Плутати grid-template-columns (визначає колонки самої сітки-контейнера) із grid-column (визначає, які колонки займає конкретний дочірній елемент).
Забувати про gap і використовувати margin на дочірніх елементах сітки для відступів — gap задає відступ між комірками сітки декларативно, без ризику зайвого відступу на краях сітки, який довелось би прибирати margin-хаками.
CSS Grid керує рядками й стовпцями одночасно як єдиною двовимірною сіткою — природний вибір для макетів цілих сторінок і будь-якого розташування з вирівнюванням по обох осях; grid-template-areas робить структуру макета читабельною прямо в CSS. Flexbox і Grid не конкурують, а доповнюють один одного — Grid для загальної структури, Flexbox для одновимірного розташування всередині окремих ділянок.