1.1 Основні принципи Grid Layout
CSS Grid Layout — це потужний інструмент для створення складних і адаптивних макетів. Він надає розробникам двовимірну систему сіток для розташування елементів, що спрощує створення як простих, так і складних макетів. Розглянемо основні концепції та синтаксис CSS Grid, не заглиблюючись у специфічні властивості.
Основні концепції CSS Grid
- Grid-контейнер і Grid-елементи:
- Grid-контейнер — це елемент, який включає в себе
display: grid. Цей елемент стає контейнером сітки, а всі його безпосередні дочірні елементи стають Grid-елементами - Grid-елементи — це безпосередні дочірні елементи Grid-контейнера, які розташовуються в сітці
- Grid-контейнер — це елемент, який включає в себе
- Осі сітки:
- Головна вісь (inline axis) і блочна вісь (block axis): Grid підтримує дві осі для розташування елементів — головну і блочну осі. За замовчуванням, головна вісь йде горизонтально, а блочна — вертикально
- Клітинки сітки (Grid Cells):
- Клітинки сітки — це базові блоки, які утворюються на перетині рядків і колонок. Кожен Grid-елемент займає одну або кілька клітинок
- Лінії сітки (Grid Lines):
- Лінії сітки — це горизонтальні та вертикальні лінії, що розподіляють рядки і колонки. Вони використовуються для розташування елементів відносно сітки
- Області сітки (Grid Areas):
- Області сітки — це іменовані області сітки, створені шляхом об'єднання кількох клітинок. Вони дозволяють групувати клітинки і розташовувати елементи у визначених областях
1.2 Синтаксичні елементи
Основні синтаксичні елементи CSS Grid
1. Створення Grid-контейнера:
.container {
display: grid; /* або display: inline-grid */
}
2. Визначення структури сітки:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Визначає три колонки різної ширини */
grid-template-rows: 50px 100px; /* Визначає два рядки різної висоти */
}
3. Об'єднання клітинок за допомогою grid-area:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* Елемент займає перший рядок і перші три колонки */
}
4. Автоматичне розташування елементів:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Задає мінімальну висоту рядків */
}
1.3 Приклади
Простий макет з CSS Grid:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Пояснення:
- Контейнер .container задає три колонки, перша і третя з яких займають рівну частку доступного простору, а друга — у два рази більше
- Задаються два рядки з фіксованою висотою
- Властивість gap задає відстань між клітинками сітки
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ