1
2
3
4
5
6
7
8
Контейнер сетки
Чтобы HTML элемент вел себя как контейнер сетки, необходимо задать для свойства display
значение grid или inline-grid.
Контейнеры сетки состоят из элементов сетки, расположенных внутри столбцов и строк.
Свойство grid-template-columns
Свойство grid-template-columns определяет
количество столбцов в макете сетки, и это может определить ширину каждого столбца.
Значение представляет собой список, разделенный пробелами, где каждое значение определяет длину соответствующей колонки.
Если вы хотите, чтобы макет сетки содержал 4 столбца, укажите ширину 4 столбцов или "auto",
если все столбцы должны иметь одинаковую ширину.
Сделать сетку с 4 столбцами:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Примечание: Если в сетке из 4 пунктов содержится более 4 столбцов, сетка будет автоматически добавлять новую строку для размещения элементов.
Свойство grid-template-columns также можно использовать для указания размера (ширины) столбцов.
Задать размер из 4 колонок:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Свойство grid-template-rows
Свойство grid-template-rows определяет высоту каждой строки.
1
2
3
4
5
6
7
8
Значение space-separated-list, в котором каждое значение определяет высоту соответствующей строки:
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Свойство justify-content
Свойство justify-content используется для выравнивания всей сетки внутри контейнера.
1
2
3
4
5
6
Примечание: Общая ширина сетки должна быть меньше ширины контейнера,
чтобы свойство justify-content имело какой-либо эффект.
.grid-container {
display: grid;
justify-content: space-evenly;
}
.grid-container {
display: grid;
justify-content: space-around;
}
.grid-container {
display: grid;
justify-content: space-between;
}
.grid-container {
display: grid;
justify-content: center;
}
.grid-container {
display: grid;
justify-content: start;
}
.grid-container {
display: grid;
justify-content: end;
}
Свойство align-content
Свойство align-content используется для вертикального выровнивания всей сетки внутри контейнера.
1
2
3
4
5
6
Примечание: Общая высота сетки должна быть меньше высоты контейнера,
чтобы свойство align-content имело какой-либо эффект.
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
.grid-container {
display: grid;
height: 400px;
align-content: end;
}