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: определяет базовые стили для элементов сетки, такие как фоновый цвет, цвет текста, отступы, центрирование текста и граница
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ