5.1 Властивість grid-auto-rows
CSS Grid Layout пропонує круті інструменти для автоматичного розміщення елементів у сітці. Властивості grid-auto-rows, grid-auto-columns і grid-auto-flow допомагають керувати поведінкою елементів, які не явно розміщені в сітці. Розглянемо ці властивості детальніше.
Властивість grid-auto-rows визначає висоту рядків, які додаються автоматично, коли елементи виходять за межі явно заданих рядків.
Синтаксис:
.grid-container {
grid-auto-rows: value;
}
Де:
-
value: висота автоматично доданих рядків. Може бути вказана в різних одиницях вимірювання (px,%,fr,autoі т. д.)
Приклад 1: Фіксована висота рядків
У цьому прикладі всі автоматично додані рядки матимуть фіксовану висоту 100px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три стовпці однакової ширини */
grid-auto-rows: 100px; /* Автоматично додані рядки матимуть висоту 100px */
}
Приклад 2: Гнучка висота рядків
У цьому прикладі автоматично додані рядки матимуть мінімальну висоту 100px, але можуть збільшуватися за необхідності:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto); /* Мінімальна висота рядків 100px, може збільшуватися автоматично */
}
5.2 Властивість grid-auto-columns
Властивість grid-auto-columns визначає ширину стовпців, які додаються автоматично, коли елементи виходять за межі явно заданих стовпців.
Синтаксис:
.grid-container {
grid-auto-columns: value;
}
Де:
-
value: ширина автоматично доданих стовпців. Може бути вказана в різних одиницях вимірювання (px,%,fr,autoі т. д.)
Приклад 1: Фіксована ширина стовпців
У цьому прикладі всі автоматично додані стовпці матимуть фіксовану ширину 100px:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* Три рядки фіксованої висоти */
grid-auto-columns: 100px; /* Автоматично додані стовпці будуть шириною 100px */
}
Приклад 2: Гнучка ширина стовпців
У цьому прикладі автоматично додані стовпці матимуть мінімальну ширину 100px, але можуть збільшуватися до однієї частини вільного простору:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: minmax(100px, 1fr); /* Мінімальна ширина стовпців 100px, може збільшуватися до однієї частини вільного простору */
}
5.3 Властивість grid-auto-flow
Властивість grid-auto-flow визначає, як автоматично розміщувати елементи в сітці, які не явно задані за допомогою властивостей grid-row і grid-column.
Синтаксис:
.grid-container {
grid-auto-flow: value;
}
Де:
value: значення, що визначає порядок розміщення елементів. Можливі значення:
row(за замовчуванням): елементи розміщуються по рядкахcolumn: елементи розміщуються по стовпцяхdense: елементи розміщуються з щільним заповненням, без порожніх ячейок (використовується разом зrowабоcolumn)
Приклад 1: Розміщення по рядках
У цьому прикладі елементи будуть розміщуватися по рядках, заповнюючи рядки один за одним:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* Елементи розміщуються по рядках */
}
Приклад 2: Розміщення по стовпцях
У цьому прикладі елементи будуть розміщуватися по стовпцях, заповнюючи стовпці один за одним:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; /* Елементи розміщуються по стовпцях */
}
Приклад 3: Щільне заповнення
У цьому прикладі елементи будуть розміщуватися по рядках з щільним заповненням, що мінімізує кількість порожніх ячейок:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* Елементи розміщуються по рядках з щільним заповненням */
}
5.4 Приклад повної реалізації
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три стовпці однакової ширини */
grid-auto-rows: 100px; /* Автоматично додані рядки матимуть висоту 100px */
grid-auto-flow: row dense; /* Елементи розміщуються по рядках з щільним заповненням */
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад автоматичного розміщення елементів у CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Елемент 1</div>
<div class="grid-item">Елемент 2</div>
<div class="grid-item">Елемент 3</div>
<div class="grid-item">Елемент 4</div>
<div class="grid-item">Елемент 5</div>
<div class="grid-item">Елемент 6</div>
</div>
</body>
</html>
Пояснення коду:
-
.grid-container: створює контейнер Grid з трьома стовпцями однакової ширини і автоматичними рядками висотою100px. Елементи розміщуються по рядках з щільним заповненням -
.grid-item: визначає базові стилі для елементів сітки, такі як фоновий колір, колір тексту, відступи, центрування тексту і межа
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ