Промежутки CSS Grid
Промежутки, известные также как gutters, — это пространства, разделяющие строки и столбцы grid-контейнера.
Они появляются только между строками и столбцами сетки и никогда не появляются по внешним краям grid-контейнера.
По умолчанию размер промежутка равен 0, поэтому элементы сетки соприкасаются без какого-либо расстояния.
Изменить это можно с помощью трёх свойств:
column-gap— управляет расстоянием между столбцами сеткиrow-gap— управляет расстоянием между строками сеткиgap— сокращение дляrow-gapиcolumn-gap
Свойство CSS column-gap
Используйте column-gap, чтобы управлять промежутком между столбцами сетки.
Пример
В этом примере столбцы сетки находятся на расстоянии 50 пикселей друг от друга.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid column-gap</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 50px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The column-gap Property</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Свойство CSS row-gap
Используйте row-gap, чтобы управлять промежутком между строками сетки.
Пример
В этом примере строки сетки находятся на расстоянии 50 пикселей друг от друга.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid row-gap</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
row-gap: 50px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The row-gap Property</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Свойство CSS gap
Запись gap — это сокращение для записи row-gap и column-gap.
При одном значении оно задаёт одинаковый промежуток и для строк, и для столбцов.
При двух значениях первое считается row-gap, а второе — column-gap.
Одно значение
Одно значение задаёт и строкам, и столбцам промежуток 50px.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid gap - Single Value</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 50px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The gap Property (Single Value)</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Два значения
Два значения задают строкам промежуток 30px, а столбцам — 100px.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid gap - Two Values</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 30px 100px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The gap Property (Two Values)</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Свойства CSS Grid Gap
Свойства CSS для промежутков сетки вкратце:
column-gap— промежуток, оставляемый между столбцами сеткиgap— сокращение дляrow-gapиcolumn-gaprow-gap— промежуток, оставляемый между строками сетки