Введення в CSS Grid
Знайомимося з CSS Grid, створенням Grid-контейнера та принципом роботи двовимірної сітки.
Введення в CSS Grid
CSS Grid — це сучасний спосіб розміщення елементів одночасно по горизонталі та вертикалі.
На відміну від Flexbox, який працює переважно в одному напрямку, Grid дозволяє створювати двовимірні сітки зі стовпців та рядків.
CSS Grid потужніший за Flexbox для складних макетів, але потребує більше знань для правильного використання.
Створення Grid-контейнера
Щоб перетворити звичайний блок у Grid-контейнер, потрібно задати йому властивість display зі значенням grid.
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>#parent {
display: grid;
}Grid складається з вертикальних ліній та горизонтальних ліній. Вертикальні області утворюють стовпці, а горизонтальні — рядки.
Місце перетину стовпця та рядка називається Grid-коміркою.
- Стовпці (columns) розташовані вертикально.
- Рядки (rows) розташовані горизонтально.
- Комірка (grid cell) — область перетину рядка і стовпця.
- Grid дозволяє керувати розташуванням елементів у двох напрямках.
Можливості CSS Grid
За допомогою спеціальних властивостей можна керувати розміром колонок, рядків та позицією елементів у сітці.
У наступних уроках розглянемо створення колонок, рядків та об'єднаємо всі можливості CSS Grid для створення повноцінних макетів.
- №1. Створіть div з чотирма дочірніми елементами.
- №2. Перетворіть батьківський блок у Grid-контейнер за допомогою display: grid.
- №3. Перевірте, як зміниться розташування дочірніх елементів.
- №4. Відкрийте DevTools та знайдіть Grid-інструменти браузера.
💡 Показати підказку
Для створення Grid-контейнера достатньо додати властивість display: grid батьківському елементу.
✅ Показати відповідь
#parent {
display: grid;
}