2.1 Властивість display: grid
CSS Grid Layout — це потужна система компонування, яка дозволяє створювати складні макети веб-сторінок з використанням рядків та стовпців. Основним кроком при роботі з CSS Grid є створення контейнера Grid. Нижче ми розглянемо, як використовувати властивість display: grid для створення контейнера Grid та керування його базовими аспектами.
Основні концепції створення контейнера Grid
Властивість display: grid
Властивість display: grid визначає елемент як контейнер Grid. Це базовий крок, який дозволяє використовувати всі можливості CSS Grid для компонування елементів.
Приклад:
.grid-container {
display: grid;
}
Основні елементи контейнера Grid
Після визначення контейнера Grid за допомогою властивості display: grid, всі дочірні елементи цього контейнера автоматично стають grid-елементами. Це дозволяє керувати їх розташуванням та вирівнюванням всередині контейнера.
Приклад:
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад контейнера 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>
</body>
</html>
Пояснення коду:
.grid-container: визначає елемент як контейнер Grid за допомогою властивостіdisplay: grid. Також додає межу, щоб візуально виділити контейнер.grid-item: визначає базові стилі для елементів всередині контейнера Grid, такі як фон, колір тексту, відступи, межа та центрирування тексту
2.2 Вкладені контейнери Grid
Однією з переваг CSS Grid є можливість створення вкладених контейнерів Grid. Це дозволяє створювати складні макети, де один grid-елемент може стати grid-контейнером для своїх дочірніх елементів.
Приклад:
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
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>Вкладені контейнера Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Елемент 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">Вкладений елемент 1</div>
<div class="nested-grid-item">Вкладений елемент 2</div>
</div>
</div>
<div class="grid-item">Елемент 3</div>
</div>
</body>
</html>
Пояснення коду:
-
.nested-grid-container: визначає вкладений контейнер Grid за допомогою властивостіdisplay: grid, а також додає проміжки між елементами (gap: 5px) та внутрішній відступ (padding: 10px) -
.nested-grid-item: визначає базові стилі для елементів всередині вкладеного контейнера Grid, такі як фон, відступи та межа
2.3 Управління поведінкою контейнера Grid
Властивість display: grid також дозволяє використовувати додаткові властивості для управління поведінкою контейнера Grid. Наприклад, властивість grid-auto-flow керує автоматичним розташуванням елементів.
Приклад:
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Контейнер Grid з auto-flow</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>
</body>
</html>
2.4 Використання Flexbox всередині контейнера Grid
У деяких випадках використання Flexbox всередині grid-елементів може бути корисним для створення більш складних макетів. Це дозволяє комбінувати переваги обох технологій.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox всередині контейнера Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex елемент 1</div>
<div class="flex-item">Flex елемент 2</div>
</div>
<div class="grid-item">Елемент 2</div>
<div class="grid-item">Елемент 3</div>
</div>
</body>
</html>
Пояснення коду:
.flex-container: визначає grid-елемент як flex-контейнер за допомогою властивостіdisplay: flex.flex-item: визначає базові стилі для елементів всередині flex-контейнера, такі як фонова заливка, відступи та гнучкість (flex: 1)
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ