Контейнер CSS Grid - выравнивание содержимого сетки
Когда содержимое сетки не заполняет свой контейнер, выравниванием этого содержимого управляют три свойства:
justify-content— выравнивание по горизонтали, для содержимого уже контейнера.align-content— выравнивание по вертикали, для содержимого ниже контейнера.place-content— сокращение, охватывающееalign-contentиjustify-content.
Свойство CSS justify-content
justify-content работает со свободным горизонтальным пространством в контейнере: оно определяет, как содержимое сетки выравнивается по горизонтали, когда такое пространство есть.
Возможные значения: space-evenly, space-around, space-between, center, start и end.
Примечание: justify-content не даёт никакого эффекта, если общая ширина содержимого сетки не меньше ширины контейнера.
justify-content: space-evenly
При space-evenly элементы сетки получают равное пространство вокруг себя.
Prompt
Создайте макет CSS Grid с контейнером, содержащим 6 пронумерованных элементов в сетке 3x2. Установите ширину столбцов сетки по 70px каждый и используйте
justify-content: space-evenly, чтобы равномерно распределить пространство вокруг столбцов. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: space-evenly</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: space-evenly;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: space-evenly</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: space-around
При использовании space-around каждый элемент сетки окружён пространством.
Prompt
Создайте макет CSS Grid с контейнером, содержащим 6 пронумерованных элементов в сетке 3x2. Установите ширину столбцов сетки по 70px каждый и используйте
justify-content: space-around, чтобы добавить равное пространство вокруг каждого столбца. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: space-around</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: space-around;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: space-around</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: space-between
При использовании space-between между элементами сетки появляется пространство.
Prompt
Создайте макет CSS Grid с контейнером, содержащим 6 пронумерованных элементов в сетке 3x2. Установите ширину столбцов сетки по 70px каждый и используйте
justify-content: space-between, чтобы разместить максимальное пространство между столбцами. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: space-between</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: space-between;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: space-between</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: center
Значение center собирает элементы сетки по центру контейнера.
Prompt
Создайте CSS Grid-раскладку с контейнером, содержащим 6 пронумерованных элементов в сетке 3x2. Установите ширину колонок сетки по 70px каждая и используйте
justify-content: center, чтобы центрировать сетку по горизонтали внутри контейнера. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: center</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: center;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: center</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: start
Значение start собирает элементы сетки у начала контейнера.
Prompt
Создайте макет CSS Grid с контейнером, содержащим 6 пронумерованных элементов в сетке 3x2. Установите ширину столбцов сетки по 70px каждый и используйте
justify-content: start, чтобы выровнять сетку по началу контейнера. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: start</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: start;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: start</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: end
Значение end собирает элементы сетки у дальнего конца контейнера.
Prompt
Создайте макет CSS Grid с контейнером, содержащим 6 пронумерованных элементов в сетке 3x2. Установите ширину столбцов сетки по 70px каждый и используйте
justify-content: end, чтобы выровнять сетку по концу контейнера. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: end</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: end;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: end</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Свойство CSS align-content
Вертикальный аналог — align-content: когда у контейнера есть лишняя высота, оно определяет, как содержимое сетки выравнивается по вертикали.
Возможные значения: space-evenly, space-around, space-between, center, start и end.
Примечание: align-content не даёт никакого эффекта, если общая высота содержимого сетки не меньше высоты контейнера.
Чтобы эффект было легче увидеть, в примерах ниже используется контейнер высотой 300 пикселей.
align-content: center
Значение center собирает элементы сетки посередине контейнера.
Prompt
Создайте CSS Grid-раскладку с контейнером высотой 300px, содержащим 6 пронумерованных элементов в сетке 3x2. Используйте
align-content: center чтобы вертикально центрировать строки сетки внутри контейнера. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: center</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: center;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: center</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: space-evenly
space-evenly равномерно распределяет линии сетки, поэтому пространство сверху, снизу и между линиями одинаково.
Prompt
Создайте CSS Grid-раскладку с контейнером высотой 300px, содержащим 6 пронумерованных элементов в сетке 3x2. Используйте
align-content: space-evenly чтобы равномерно распределить вертикальное пространство вокруг строк. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: space-evenly</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: space-evenly;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: space-evenly</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: space-around
space-around делает промежутки между линиями сетки равными, а пространство перед первой строкой и после последней строки составляет половину промежутка между строками.
Prompt
Создайте CSS Grid-раскладку с контейнером высотой 300px, содержащим 6 пронумерованных элементов в сетке 3x2. Используйте
align-content: space-around чтобы добавить равное вертикальное пространство вокруг каждой строки. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: space-around</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: space-around;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: space-around</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: space-between
space-between тоже делает эти промежутки равными, но первая строка прилегает к верху контейнера, а последняя строка — к его низу.
Prompt
Создайте CSS Grid-раскладку с контейнером высотой 300px, содержащим 6 пронумерованных элементов в сетке 3x2. Используйте
align-content: space-between чтобы разместить первую строку сверху, а последнюю строку снизу. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: space-between</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: space-between;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: space-between</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: start
Значение start собирает элементы сетки у верхней части контейнера.
Prompt
Создайте CSS Grid-раскладку с контейнером высотой 300px, содержащим 6 пронумерованных элементов в сетке 3x2. Используйте
align-content: start чтобы выровнять строки сетки по верхнему краю контейнера. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: start</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: start;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: start</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: end
Значение end собирает элементы сетки у нижней части контейнера.
Prompt
Создайте CSS Grid-раскладку с контейнером высотой 300px, содержащим 6 пронумерованных элементов в сетке 3x2. Используйте
align-content: end чтобы выровнять строки сетки по нижнему краю контейнера. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: end</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: end;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: end</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Свойство CSS place-content
Вместо того чтобы писать align-content и justify-content по отдельности, их можно объединить сокращением place-content.
Если указаны два значения, первое применяется к align-content, а второе к justify-content. Так, place-content: start center задаёт align-content значение start, а justify-content значение center.
Если указано одно значение, оно применяется и к align-content, и к justify-content.
Примечание: place-content не даёт никакого эффекта, если общая высота и ширина содержимого сетки не меньше высоты и ширины контейнера.
place-content: center
Значение center собирает элементы сетки посередине контейнера по обеим осям, по вертикали и по горизонтали.
Prompt
Создайте макет CSS Grid с контейнером высотой 300px, содержащим 6 пронумерованных элементов в сетке 3x2. Используйте
place-content: center, чтобы центрировать сетку как по вертикали, так и по горизонтали внутри контейнера. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid place-content: center</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
place-content: center;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid place-content: center</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
place-content: end space-between
При end space-between строки сетки смещаются к нижней части контейнера, а столбцы распределяются по горизонтали с равным пространством между ними.
Prompt
Создайте макет CSS Grid с контейнером высотой 300px, содержащим 6 пронумерованных элементов в сетке 3x2 со столбцами по 70px. Используйте
place-content: end space-between, чтобы выровнять строки по нижнему краю и распределить столбцы с пространством между ними. Задайте контейнеру цвет фона, а элементам — отдельный цвет фона с отступами.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid place-content: end space-between</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
place-content: end space-between;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid place-content: end space-between</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>