CSS Контейнер сетки
1
2
3
4
5
6
7
8
Grid Контейнер
Чтобы элемент HTML работал как контейнер сетки, необходимо установить для свойства отображения значение 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
Значение представляет собой разделенный пробелами список, где каждое значение определяет высоту соответствующей строки:
Свойство justify-content
Свойство justify-content используется для выравнивания всей сетки внутри контейнера.
1
2
3
4
5
6
Примечание: Общая ширина сетки должна быть меньше ширины контейнера, чтобы свойство justify-content имело какой-либо эффект.
Свойство align-content
Свойство align-content используется для вертикального выравнивания всей сетки внутри контейнера.
1
2
3
4
5
6
Примечание: Общая высота сетки должна быть меньше высоты контейнера, чтобы свойство align-content имело какой-либо эффект.
Пример
.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;
}
