Контейнер CSS Grid
Grid-контейнер содержит один или несколько grid-элементов, расположенных в столбцах и строках.
Все прямые дочерние элементы grid-контейнера автоматически становятся grid-элементами.
Элемент становится grid-контейнером, когда его свойство display установлено в grid или inline-grid.
Пример
Prompt
Создайте HTML-страницу с grid-контейнером, содержащим 5 пронумерованных элементов (от 1 до 5). Используйте
display: grid для контейнера.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Container</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Grid Container</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Свойство Display Grid
Элемент <div> становится grid-контейнером, когда его свойство display установлено в grid или inline-grid.
Блочный grid
Используйте display: grid, чтобы создать блочный grid-контейнер.
Prompt
Создайте HTML-страницу с div-контейнером, использующим
display: grid, содержащим 5 пронумерованных дочерних элементов (от 1 до 5). Оформите каждый элемент цветом фона и отступами, чтобы показать блочное поведение сетки.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Grid</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Display Grid</h1>
<p>A block-level grid container:</p>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Строчный grid
Используйте display: inline-grid, чтобы создать строчный grid-контейнер.
Prompt
Создайте HTML-страницу с div-контейнером, использующим
display: inline-grid, содержащим 5 пронумерованных дочерних элементов (от 1 до 5). Оформите каждый элемент цветом фона и отступами, чтобы показать строчное поведение сетки.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Inline Grid</title>
<style>
.container {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Display Inline Grid</h1>
<p>An inline-level grid container:</p>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Свойства контейнера CSS Grid
Вот список всех свойств CSS, которые можно использовать на grid-контейнере:
align-content— выравнивает сетку по вертикали внутри контейнера.align-items— выравнивает элементы в сетке.column-gap— задаёт промежуток между столбцами.display— устанавливает элемент как grid-контейнер.gap— сокращение дляrow-gapиcolumn-gap.grid— сокращение для нескольких grid-свойств.grid-auto-columns— задаёт размер автоматически создаваемых столбцов.grid-auto-flow— управляет тем, как вставляются автоматически размещённые элементы.grid-auto-rows— задаёт размер автоматически создаваемых строк.grid-template— сокращение для определения строк, столбцов и областей.grid-template-areas— определяет именованные области сетки.grid-template-columns— задаёт количество и размер столбцов.grid-template-rows— задаёт количество и размер строк.justify-content— выравнивает сетку по горизонтали внутри контейнера.justify-items— выравнивает элементы вдоль оси строки.place-content— сокращение дляalign-contentиjustify-content.place-items— сокращение дляalign-itemsиjustify-items.row-gap— задаёт промежуток между строками.