[html academy] Построение сеток на гридах по макету

[Moderator]

Профессиональная задача: Опираясь на графический макет, нужно построить сетку крупных блоков страницы с использованием технологии CSS Grid Layout. Сетка должна быть спроектирована с учётом разных вариантов переполнения (переполнения контентом, изменения количества колонок) и должна визуально соответствовать макету. Зачем нужен этот навык: Грамотно построенная сетка не просто выстраивает элементы как на макете, но и делает свёрстанную страницу «пуленепробиваемой»: все элементы будут вести себя предсказуемо, не развалятся при изменении контента и не потребуют постоянных доработок из-за поломки в непредсказуемом месте. Механизм гридов — самый мощный инструмент для построения сеток на данный момент. С его помощью собираются как простые раскладки, которые можно построить и с помощью флексбоксов, так и необычные, которые другим способом, кроме гридов, на CSS собрать нельзя. Освоив этот навык, вы научитесь оценивать макеты с точки зрения возможности их вёрстки на гридах, разбирать макеты на блоки, пригодные для структурирования их с помощью гридов, а также работать с вложенностью грид-контейнеров. Вы узнаете основные термины и понятия, свойства и их применение, особенности работы гридов, научитесь применять их правильно в различных ситуациях. Расположение относительно других навыков: Этот навык идёт после семантической разметки и работы с графическими редакторами в дереве навыков. Минимальные требования для освоения: Пройдены пять глав курса Построение сеток: Блочная модель документа, Сетки, Флексбокс, часть 1, Флексбокс, часть 2, Знакомство с гридами.