📖
CSS Grid — сітка для макетів
grid-template-columns, fr, gap і grid-area
📐
Grid — це таблиця Excel для CSS
Flexbox вирівнює елементи в одному напрямку (рядок або колонка). Grid — це двовимірна сітка: ти задаєш і рядки, і колонки одночасно, а потім розміщуєш елементи в комірках. Як Excel де ти можеш займати кілька комірок одночасно.
Основи Grid
css
.grid-container {
display: grid;
/* 3 колонки: перша 200px, друга гнучка, третя 200px */
grid-template-columns: 200px 1fr 200px;
/* 3 рівні колонки */
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr); /* скорочення */
/* Автоматичні колонки мінімум 250px */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* Рядки */
grid-template-rows: 80px 1fr 60px;
/* Відступи */
gap: 24px; /* рядки і колонки */
row-gap: 16px; /* тільки рядки */
column-gap: 24px; /* тільки колонки */
}fr (fractional unit) — дробова частина вільного простору. 1fr 2fr — перша займає 1/3, друга 2/3.
Розміщення елементів
css
/* Займати кілька комірок */
.item {
grid-column: 1 / 3; /* від лінії 1 до лінії 3 (2 колонки) */
grid-column: span 2; /* займати 2 колонки (простіше) */
grid-row: span 2; /* займати 2 рядки */
}
/* Іменовані зони — найзрозуміліший спосіб */
.layout {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }css
💬
repeat(auto-fill, minmax(280px, 1fr)) — один рядок CSS замість трьох media queries. Магія Grid.
Flexbox чи Grid? Просте правило: якщо розміщуєш елементи В ОДНОМУ НАПРЯМКУ (рядок або колонка) — Flexbox. Якщо потрібна ДВОВИМІРНА сітка (рядки І колонки одночасно) — Grid.