Разница между вертикальным и горизонтальным выравниванием в CSS Grid заключается в направлении, по которому выравниваются элементы: по вертикали или по горизонтали. 3

Вертикальное выравнивание в CSS Grid осуществляется с помощью свойств align-items и align-content. 3 Они выравнивают элементы в пределах области по вертикали. 3 Некоторые возможные значения свойств:

• align-items: stretch — растягивает элементы на всю длину грид-ячейки. 3
• align-items: start — располагает элементы в верхней части грид-ячейки. 3
• align-items: center — размещает элементы в центре грид-ячейки. 3
• align-items: end — располагает элементы в нижней части грид-ячейки. 3

Горизонтальное выравнивание в CSS Grid происходит с помощью свойств justify-items и justify-content. 3 Они выравнивают элементы в пределах области по горизонтали. 3 Некоторые возможные значения свойств:

• justify-items: stretch — растягивает элементы на всю ширину грид-ячейки. 3
• justify-items: start — располагает элементы в левой части грид-ячейки или области. 3
• justify-items: center — размещает элементы в центре грид-ячейки или области. 3
• justify-items: end — располагает элементы в правой части грид-ячейки или области. 3

Чтобы одновременно настроить выравнивание по вертикали и горизонтали, можно использовать свойство place-items. 5