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)
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ