CSS grid layout

Що таке CSS Grid?

CSS Grid Layout — це потужна двовимірна система макетів, яка дозволяє створювати складні макети з рядками та стовпцями одночасно. На відміну від Flexbox (одновимірного), Grid надає вам повний контроль над обома осями.

Увімкнення Grid

css

.container {
  display: grid; /* або inline-grid */
}

Визначення Рядків та Стовпців

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

fr — дробова одиниця, розподіляє залишковий простір
auto — розмір залежить від вмісту
px, %, rem — фіксовані розміри
minmax(min, max) — гнучкий діапазон

Основні Властивості Контейнера

Властивість	Опис
`grid-template-columns`	Визначає розміри стовпців
`grid-template-rows`	Визначає розміри рядків
`gap` / `row-gap` / `column-gap`	Проміжок між клітинками
`grid-template-areas`	Іменовані області сітки для інтуїтивних макетів
`justify-items`	Горизонтальне вирівнювання елементів у клітинках
`align-items`	Вертикальне вирівнювання елементів у клітинках
`justify-content`	Горизонтальне вирівнювання всієї сітки
`align-content`	Вертикальне вирівнювання всієї сітки

Основні Властивості Елементів

Властивість	Опис
`grid-column`	Які стовпці охоплює елемент (`grid-column: 1 / 3`)
`grid-row`	Які рядки охоплює елемент
`grid-area`	Іменована область або скорочення для розміщення рядка/стовпця
`justify-self`	Горизонтальне вирівнювання одного елемента
`align-self`	Вертикальне вирівнювання одного елемента

repeat() та minmax()

css

/* 3 рівні стовпці */
grid-template-columns: repeat(3, 1fr);

/* Авто-заповнення адаптивних стовпців */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

/* Авто-підгонка — згортає порожні доріжки */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Іменовані Області Сітки

css

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Охоплення Кількох Клітинок

css

.item {
  grid-column: 1 / 3;     /* Охоплює від лінії стовпця 1 до 3 */
  grid-row: 1 / span 2;   /* Починається з рядка 1, охоплює 2 рядки */
}

auto-fill проти auto-fit

Значення	Поведение
`auto-fill`	Створює стільки доріжок, скільки вміщається, зберігає порожні доріжки
`auto-fit`	Створює доріжки, а потім згортає порожні, щоб елементи розтягувалися

css

/* auto-fit — елементи розтягуються, щоб заповнити простір */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Важливо:

CSS Grid ідеально підходить для макетів на рівні сторінки та двовимірних розташувань. Поєднуйте його з Flexbox: використовуйте Grid для загальної структури сторінки та Flexbox для вирівнювання на рівні компонентів всередині клітинок сітки.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань