В основному більшість властивостей вирівнювання працюють також на грід елементах, як і на інших елементах. Але також є деякі властивості вирівнювання, які застосовуються виключно для грідів і флексів.
Властивість align-items вказує стандартне значення align-self для всіх грід елементів, що беруть участь у грід контейнері в контексті форматування цього контейнера.
align-items: center;
На прикладі вище ми застосовуємо align-items: center до грід контейнера, відповідно всі грід елементи будуть вирівняні по центру блочної осі.
Ця властивість вирівнює елемент всередині блоку контейнера вздовж блочної/колонкової/поперечної осі.
Тут червоному елементу встановлено значення baseline, а синій елемент має значення stretch. Висота синього елемента рівна auto, таким чином він розтягується на всю висоту області грида.
Проте ми не встановлювали властивості для зеленого елемента. Він використовує значення за замовчуванням, яке у нашому випадку дорівнює center у align-items грід контейнера.
Ця властивість задає стандартне значення для justify-self для всіх грід елементів у грід контейнері.
Ця властивість може використовуватись для вирівнювання індивідуальних грід елементів вздовж строчної/лінійної/головної осі.
Властивість justify-content вирівнює контент грід контейнера повністю вздовж головної осі.
Її можна застосовувати для вирівнювання всього грида в грід контейнері, у випадку, якщо грід трек займає менше місця, ніж його грід контейнер. Це може статися, якщо ви встановили розмір трека в абсолютних одиницях, наприклад у пікселях, а грід контейнер займає більше місця, ніж всі треки разом.
Ця властивість схожа на justify-content, але вирівнює вздовж поперечної/блочної осі.
align-content: center;
Ця властивість є скороченням для justify-content та align-content. place-content: center end;
Покажеться так:
Використовуючи шаблони CSS на грідах, можливо накладати грід елементи один на одного через перетин грід областей, від’ємні зовнішні відступи та інші техніки позиціонування. Коли відбувається накладання, елементи накладаються один на одного у заданому порядку або відповідно до z-index.
Якщо у грід елементів змінено порядок як через z-index, так і через order, то у порядку накладання z-index відіграє вирішальну роль. Це дозволяє вам змінювати порядок елементів без втрати контролю над накладанням.
