← Назад до курсу

▸ Як працює веб

▸ Перша веб-сторінка

▸ HTML-елементи та текст

▸ HTML-семантика

▸ HTML форми та медіа

▸ CSS основи та селектори

▸ Блокова модель CSS

▸ CSS позиціонування та Flexbox

▸ CSS типографіка та декор

▸ CSS-анімації та адаптивність

▸ Практика HTML/CSS: верстка проєкту

▸ JavaScript: змінні та типи даних

▸ JavaScript: методи рядків та Math

▸ JavaScript: масиви

▸ JavaScript: об'єкти та JSON

▸ JavaScript: керування потоком та функції

▸ JavaScript та DOM

▸ Node.js основи

▸ Express.js та REST API

▸ SQL та бази даних

▼ CSS Grid: двовимірна розкладка

▸ CSS Custom Properties та теми

▸ JavaScript: Класи та ООП

▸ JavaScript: Обробка помилок

▸ JavaScript: Fetch API та HTTP-запити

▸ JavaScript: Регулярні вирази

▸ npm, package.json та інструменти розробки

▸ Тестування JavaScript з Jest

← До курсу

CSS Grid: двовимірна розкладка

Основи Grid: контейнер та треки

📖 Теорія

CSS Grid — двовимірна система (рядки І колонки), на відміну від Flexbox (одновимірний).

/ Вмикаємо Grid /

💡 Приклад коду

.grid-container {
  display: grid;

  /* Визначаємо колонки */
  grid-template-columns: 200px 1fr 1fr;  /* 3 колонки */
  grid-template-columns: repeat(3, 1fr); /* 3 рівні колонки */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* адаптивні */

  /* Визначаємо рядки */
  grid-template-rows: 80px auto 60px;

  /* Відступи між комірками */
  gap: 16px;           /* рядки і колонки */
  row-gap: 20px;       /* тільки між рядками */
  column-gap: 12px;    /* тільки між колонками */
}

Одиниця fr (fraction) — частка вільного простору:
1fr 1fr 1fr     → три рівних колонки
2fr 1fr 1fr     → перша вдвічі ширша
200px 1fr       → фіксована + гнучка

repeat(4, 1fr) = 1fr 1fr 1fr 1fr
auto-fill — заповнює рядок стільки колонками, скільки вміщується
minmax(250px, 1fr) — мінімум 250px, максимум 1fr

← Попередній урок Наступний урок →