Познакомившись с позиционированием и Flex, вы могли заметить, что при всём многообразии доступных средств верстать непосредственно макеты с использованием этих инструментов не так просто, как хотелось бы. Добавив множество техник, Flex не решил главной проблемы — быстрого создания сетки для сайта. Для создания хорошей структуры приходится делать дополнительные вложенности, ведь Flex по своей сути является одномерной системой. Мы можем удобно управлять контентом либо по оси x, либо по оси y. Это отлично при работе с контентом, но не при создании структуры страницы.
Flex был призван изменить стандарты верстки, избавив разработчиков от неудобных позиционирований и бесконечного страдания с float. Хоть ему это отлично удалось, но встала главная проблема: «а что делать со сложными шаблонами?». Количество flex контейнеров росло пропорционально количеству нестандартных элементов. При этом управлять таким зоопарком становилось всё труднее и труднее. Не имея четкой структуры сетки веб-страницы, которая была бы описана в одном месте, всё превращалось в невероятно хрупкую структуру. Она ломалась быстрее, чем вы успевали моргнуть.
Для создания структуры страницы появился еще один мощный инструмент — CSS Grid Layout или просто Grid. CSS Grid Layout, в отличие от Flex, является двумерной системой компоновки контента на странице.
Важно: Grid не является заменой Flex и не создавался с такой целью. Это два разных модуля, которые прекрасно работают друг с другом.
Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.
В течение курса вы будете встречать самостоятельные задания. При необходимости вы можете попрактиковаться в задачах, представленных в заданиях. Также в них будут примеры кода, в которые можно подглядывать или просто изучать.
Другая возможность применить навыки, полученные при работе с курсом — использование сервиса CodePen. Вы можете создать свой pen, внутри которого экспериментировать с позиционированием.
Также в каждом уроке курса будут представлены примеры, которые подгружаются с CodePen. Они доступны для изучения, а также вы имеете возможность в режиме реального времени вносить правки и следить за результатом. Не пропускайте такую возможность.
Курс CSS Grid показывает новые возможности по позиционировании элементов на странице. Если на Flex позиционировались небольшие блоки, то Grid позволяет создавать сетки и позиционировать по ним большие блоки страницы: шапка, блоки основного контента, боковые секции и так далее.
Для прохождения курса вам понадобятся базовые знания вёрстки элемента. Эти знания вы можете получить в курсе Основы верстки контента
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт
Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу