6.1 Свойство grid-gap
CSS Grid Layout предоставляет гибкие инструменты для управления пространством между элементами сетки. Свойства grid-gap, grid-row-gap и grid-column-gap позволяют легко задавать расстояние между строками и столбцами, что помогает создавать аккуратные и организованные макеты. Рассмотрим эти свойства подробнее.
Свойство grid-gap (сокращенное gap) определяет общее расстояние между строками и столбцами в сетке. Это свойство является сокращенной записью для grid-row-gap и grid-column-gap.
Синтаксис:
.grid-container {
grid-gap: value;
}
Где:
-
value: значение промежутка между строками и столбцами. Может быть указана в различных единицах измерения (px,%,fr,autoи т. д.)
Пример 1: Единое значение для строк и столбцов
В этом примере промежуток в 20px будет применен как к строкам, так и к столбцам:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* Промежуток 20px между всеми строками и столбцами */
}
Пример 2: Разные значения для строк и столбцов
В этом примере используется два значения: первое (10px) для строк, второе (20px) для столбцов:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 10px между строками, 20px между столбцами */
}
6.2 Свойство grid-row-gap
Свойство grid-row-gap определяет расстояние между строками в сетке. Это позволяет задать отдельное значение для промежутка между строками, независимо от столбцов.
Синтаксис:
.grid-container {
grid-row-gap: value;
}
Где:
value: значение промежутка между строками. Может быть указана в различных единицах измерения Пример 1: Задание фиксированного промежутка между строками
В этом примере расстояние между строками будет 15px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* Промежуток 15px между строками */
}
Пример 2: Использование процентов для задания промежутка
В этом примере расстояние между строками будет 5% от высоты строки:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* Промежуток 5% от высоты строки */
}
6.3 Свойство grid-column-gap
Свойство grid-column-gap определяет расстояние между столбцами в сетке. Это позволяет задать отдельное значение для промежутка между столбцами, независимо от строк.
Синтаксис:
.grid-container {
grid-column-gap: value;
}
Где:
value: значение промежутка между столбцами. Может быть указано в различных единицах измерения
Пример 1: Задание фиксированного промежутка между столбцами
В этом примере расстояние между столбцами будет 25px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* Промежуток 25px между столбцами */
}
Пример 2: Использование em для задания промежутка
В этом примере расстояние между столбцами будет 2em:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* Промежуток 2em между столбцами */
}
6.4 Комбинированное использование grid-row-gap и grid-column-gap
Вы можете комбинировать свойства grid-row-gap и grid-column-gap для более точного управления промежутками между строками и столбцами.
Пример полной реализации:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три столбца одинаковой ширины */
grid-template-rows: repeat(3, 100px); /* Три строки фиксированной высоты */
grid-row-gap: 15px; /* Промежуток 15px между строками */
grid-column-gap: 25px; /* Промежуток 25px между столбцами */
}
.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>Пример использования grid-gap, grid-row-gap и grid-column-gap</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Элемент 1</div>
<div class="grid-item item2">Элемент 2</div>
<div class="grid-item item3">Элемент 3</div>
<div class="grid-item item4">Элемент 4</div>
<div class="grid-item item5">Элемент 5</div>
<div class="grid-item item6">Элемент 6</div>
</div>
</body>
</html>
Объяснение кода:
-
.grid-container: создает контейнер Grid с тремя столбцами одинаковой ширины и тремя строками фиксированной высоты. Использует свойстваgrid-row-gapиgrid-column-gapдля задания промежутков между строками и столбцами -
.grid-item: определяет базовые стили для элементов сетки, такие как фоновый цвет, цвет текста, отступы, центрирование текста и граница
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ