Вы успешно освоили первую часть урока, посвященную созданию и настройке grid-контейнера. Теперь настало время дать волю творчеству и научиться управлять каждым отдельным элементом сетки. Если свойства контейнера задают общие «правила игры» — структуру и направление, то свойства для grid-элементов позволяют каждому дочернему блоку занять именно то место, которое ему отведено в дизайне. Это тот самый уровень контроля, который делает Модуль CSS Grid Layout по-настоящему мощным инструментом верстки.
Ключевой принцип CSS Grid — это явное позиционирование. В отличие от flex css, где элементы в основном выстраиваются в потоке, здесь вы можете точно указать, в какой колонке и строке должен находиться элемент. За это отвечают четыре фундаментальных свойства:
Для удобства и более компактной записи существуют мощные свойства-шорткаты:
Использование этих свойств — это прямой ответ на вопрос «как сделать grid css-макет с нестандартным расположением блоков?». Вы можете легко создавать элементы, которые span-ятся (растягиваются) на несколько колонок или строк, реализуя сложные дизайнерские макеты.
Еще один мощнейший инструмент — свойство grid-area. Оно является универсальным шорткатом и может работать в двух ключах:
Помимо управления позицией, не менее важно контролировать выравнивание содержимого внутри отдельной grid-ячейки. Если свойства контейнера justify-items и align-items задают выравнивание для всех элементов сразу, то для точечного управления используются свойства самого элемента:
Комбинируя эти свойства grid для элементов, вы получаете полную власть над макетом. Вы можете создавать наложения, сложные сетки с областями разного размера и идеально выравнивать контент там, где это необходимо. Вторая часть изучения CSS Grid раскрывает истинную мощь этой технологии, позволяя реализовать любой, даже самый смелый дизайн, с минимальными усилиями и чистым кодом. Освоив управление элементами, вы завершаете формирование фундамента для профессиональной верстки.