Элементы CSS Grid
Внутри grid-контейнера находится один или несколько grid-элементов. Любой элемент, являющийся прямым дочерним элементом контейнера, автоматически становится grid-элементом.
Пример
Пять grid-элементов внутри одного grid-контейнера:
Prompt
Создайте CSS grid-контейнер с пятью grid-элементами, пронумерованными от 1 до 5. Контейнер должен иметь три столбца одинаковой ширины. Оформите каждый элемент цветом фона, отступами и центрированным текстом.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Items Intro</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Items</h1>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
CSS Размер/охват grid-элементов
Один grid-элемент не ограничен одной ячейкой: он может растягиваться на несколько столбцов или строк.
Где он начинается и заканчивается, определяют эти свойства:
grid-column-start— линия столбца, на которой начинается элементgrid-column-end— линия столбца, на которой заканчивается элементgrid-column— сокращение, объединяющееgrid-column-startиgrid-column-endgrid-row-start— линия строки, на которой начинается элементgrid-row-end— линия строки, на которой заканчивается элементgrid-row— сокращение, объединяющееgrid-row-startиgrid-row-end
При размещении grid-элемента вы ссылаетесь на номера линий: линии столбцов проходят между столбцами, а линии строк — между строками.
CSS grid-column-start и grid-column-end
Grid-элемент начинается на линии столбца, указанной в grid-column-start, и заканчивается на линии, указанной в grid-column-end.
Пример
Первый grid-элемент здесь занимает пространство от линии столбца 1 до линии столбца 3:
Prompt
Создайте макет CSS grid с пятью элементами. Сетка имеет три столбца. Сделайте так, чтобы первый элемент начинался с линии столбца 1 и заканчивался на линии столбца 3, занимая таким образом два столбца. Оформите элементы цветами фона, отступами и центрированным текстом.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-column-start and grid-column-end</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<h1>grid-column-start and grid-column-end</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Свойство CSS grid-column
Запись grid-column избавляет от необходимости задавать grid-column-start и grid-column-end по отдельности, поскольку является их сокращением.
Пример
Начиная с линии столбца 1, первый grid-элемент здесь занимает 2 столбца:
Prompt
Создайте макет CSS grid с пятью элементами в сетке из трёх столбцов. Используйте сокращённое свойство grid-column на первом элементе, чтобы он начинался с линии столбца 1 и занимал 2 столбца. Оформите элементы цветами фона, отступами и центрированным текстом.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-column Shorthand</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-column: 1 / span 2;
}
</style>
</head>
<body>
<h1>grid-column Shorthand</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
CSS grid-row-start и grid-row-end
Со строками всё работает так же: grid-row-start указывает линию строки, на которой начинается grid-элемент, а grid-row-end — линию, на которой он заканчивается.
Пример
Первый grid-элемент здесь занимает пространство от линии строки 1 до линии строки 3:
Prompt
Создайте макет CSS grid с пятью элементами в сетке из трёх столбцов. Сделайте так, чтобы первый элемент начинался с линии строки 1 и заканчивался на линии строки 3, занимая таким образом две строки. Оформите элементы цветами фона, отступами и центрированным текстом.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-row-start and grid-row-end</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
</style>
</head>
<body>
<h1>grid-row-start and grid-row-end</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Свойство CSS grid-row
grid-row — это сокращение, заменяющее grid-row-start и grid-row-end.
Пример
Начиная с линии строки 1, первый grid-элемент здесь занимает 2 строки:
Prompt
Создайте макет CSS grid с пятью элементами в сетке из трёх столбцов. Используйте сокращённое свойство grid-row на первом элементе, чтобы он начинался с линии строки 1 и занимал 2 строки. Оформите элементы цветами фона, отступами и центрированным текстом.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-row Shorthand</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<h1>grid-row Shorthand</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Сочетание grid-column и grid-row
Чтобы занять несколько столбцов и строк одновременно, задайте grid-элементу и grid-column, и grid-row.
Пример
Первый grid-элемент здесь начинается на линии столбца 1 и линии строки 1 и занимает 2 столбца и 2 строки:
Prompt
Создайте макет CSS grid с шестью элементами в сетке из трёх столбцов. Используйте grid-column и grid-row на первом элементе так, чтобы он начинался с линии столбца 1 и занимал 2 столбца, а также начинался с линии строки 1 и занимал 2 строки. Оформите элементы цветами фона, отступами и центрированным текстом.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combine grid-column and grid-row</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<h1>Combine grid-column and grid-row</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Все свойства элементов CSS Grid
В этой таблице собраны все свойства CSS, которые могут использовать grid-элементы:
Таблица свойств grid-элементов
index.html
<table>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
<td>align-self</td>
<td>Aligns the content for a specific grid item along the column axis</td>
</tr>
<tr>
<td>grid-area</td>
<td>A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties</td>
</tr>
<tr>
<td>grid-column</td>
<td>A shorthand property for the grid-column-start and the grid-column-end properties</td>
</tr>
<tr>
<td>grid-column-end</td>
<td>Specifies where to end the grid item</td>
</tr>
<tr>
<td>grid-column-start</td>
<td>Specifies where to start the grid item</td>
</tr>
<tr>
<td>grid-row</td>
<td>A shorthand property for the grid-row-start and the grid-row-end properties</td>
</tr>
<tr>
<td>grid-row-end</td>
<td>Specifies where to end the grid item</td>
</tr>
<tr>
<td>grid-row-start</td>
<td>Specifies where to start the grid item</td>
</tr>
<tr>
<td>justify-self</td>
<td>Aligns the content for a specific grid item along the row axis</td>
</tr>
<tr>
<td>place-self</td>
<td>A shorthand property for the align-self and the justify-self properties</td>
</tr>
</table>