Треки CSS Grid (строки и столбцы)
Grid-контейнер определяет, сколько у него столбцов и строк и какого они размера.
Этим управляют три свойства:
grid-template-columns— сколько столбцов в сетке и какой они ширины.grid-template-rows— сколько строк в сетке и какой они высоты.grid-template-areas— располагает столбцы и строки с помощью именованных элементов сетки.
Свойство CSS grid-template-columns
Количество и ширину столбцов задаёт grid-template-columns.
Вы передаёте ему список, разделённый пробелами, с одним значением на столбец, и это значение становится шириной столбца.
Типичные варианты включают:
- Фиксированные длины, например 100px 300px 200px
- Проценты, например 20% 60% 20%
- Единицу
fr, например 1fr 2fr 1fr auto, например auto auto autorepeat(), например repeat(3, 1fr)minmax(), например minmax(80px, 1fr) 150px 150px
CSS grid-template-columns: значение auto
Если написать ключевое слово auto три раза, получится сеточная раскладка с 3 столбцами. При содержимом близкого размера, как здесь, столбцы получаются одинаковой ширины.
Пример
Три столбца одинаковой ширины с шестью пронумерованными элементами.
grid-template-columns: auto auto auto. Разместите 6 пронумерованных элементов внутри сетки.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Columns Auto</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: auto auto auto</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>
Столбцы сетки со смешанной шириной
Столбцы не обязаны быть одного размера. Вы можете, например, зафиксировать ширину 2 столбцов и оставить 1 с размером auto.
Пример
Здесь ширина столбца 1 равна 80px, столбца 2 — 200px, а столбец 3 имеет размер auto.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns Mixed Width</title>
<style>
.container {
display: grid;
grid-template-columns: 80px 200px auto;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: 80px 200px auto</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>
Столбцы сетки с единицей fr
Единица fr, сокращение от «fraction» (доля), автоматически делит доступное пространство на равные части, называемые долями.
Так, 1fr занимает 1 долю этого пространства, а 2fr занимает 2.
Равные столбцы
Ширина контейнера делится поровну, и каждый столбец получает 33.3%.
1fr 1fr 1fr). Разместите 6 пронумерованных элементов внутри сетки.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns FR Equal</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: 1fr 1fr 1fr</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>
Неравные столбцы
По сравнению с остальными второй столбец вдвое шире.
1fr 2fr 1fr). Разместите 6 пронумерованных элементов внутри.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns FR Unequal</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: 1fr 2fr 1fr</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>
Столбцы сетки с функцией repeat()
Сетка может многократно использовать группу столбцов или строк с помощью функции repeat().
Пример
Три столбца одинаковой ширины, записанные с помощью repeat().
repeat() (repeat(3, 1fr)). Разместите 6 пронумерованных элементов внутри.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns Repeat</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: repeat(3, 1fr)</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>
Столбцы сетки с функцией minmax()
Диапазон размеров с минимальным и максимальным значением задаёт функция minmax(): размер никогда не бывает меньше первого и больше второго.
Пример
Первый столбец никогда не бывает уже 80px и может расти до 1fr.
minmax(80px, 1fr) 150px 150px для grid-template-columns. Разместите 6 пронумерованных элементов внутри.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns Minmax</title>
<style>
.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: minmax(80px, 1fr) 150px 150px</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 grid-template-rows
Количество и высоту строк задаёт grid-template-rows.
Вы снова передаёте список, разделённый пробелами, и каждый его пункт задаёт высоту одной строки.
Типичные варианты включают фиксированные длины, проценты, единицу fr, auto, min-content, max-content, repeat(), minmax() и fit-content().
Пример
Первая строка получает высоту 80px, а вторая — 200px. Строки после этих двух по умолчанию используют auto.
grid-template-rows: 80px 200px, чтобы задать высоту первой строки 80px, а второй — 200px. Разместите 8 пронумерованных элементов внутри.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Rows</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-rows: 80px 200px</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>