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