CSS Grid Контейнер
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
Значення — це список, розділений пробілами, де кожне значення визначає висоту відповідного рядка:
Властивість 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;
}
Спробуйте самі »
