CSS Grid Container
1
2
3
4
5
6
7
8
Контейнер сетки
Чтобы элемент HTML вел себя как контейнер Grid, необходимо задать для свойства Display значение Grid или inline-Grid.
Контейнеры сетки состоят из элементов сетки, помещенных внутри столбцов и строк.
Свойство сетка-шаблон-столбцы
Свойство 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 определяет высоту каждой строки.
1
2
3
4
5
6
7
8
Значение представляет собой разделенный пространством список, где каждое значение определяет высоту соответствующей строки:
Пример
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Свойство "выравнивание-содержимое"
Свойство justify-content используется для выравнивания всей сетки внутри контейнера.
1
2
3
4
5
6
Примечание: Общая ширина сетки должна быть меньше ширины контейнера для свойства "выравнивание содержимого", чтобы иметь какой-либо эффект.
Пример
.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 свойство используется для
Вертикаль но Совместите всю сетку внутри контейнера.
1
2
3
4
5
6
Примечание: Общая высота сетки должна быть меньше высоты контейнера для свойства выравнивания содержимого, чтобы иметь какой-либо эффект.
Пример
.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;
}