Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Введение CSS: Вёрстка на Grid

Познакомившись с позиционированием и Flex, вы могли заметить, что при всём многообразии доступных средств верстать непосредственно макеты с использованием этих инструментов не так просто, как хотелось бы. Добавив множество техник, Flex не решил главной проблемы — быстрого создания сетки для сайта. Для создания хорошей структуры приходится делать дополнительные вложенности, ведь Flex по своей сути является одномерной системой. Мы можем удобно управлять контентом либо по оси x, либо по оси y. Это отлично при работе с контентом, но не при создании структуры страницы.

Flex был призван изменить стандарты вёрстки, избавив разработчиков от неудобных позиционирований и бесконечного страдания с float. Хоть ему это отлично удалось, но встала главная проблема: «а что делать со сложными шаблонами?». Количество flex контейнеров росло пропорционально количеству нестандартных элементов. При этом управлять таким зоопарком становилось всё труднее и труднее. Не имея чёткой структуры сетки веб-страницы, которая была бы описана в одном месте, всё превращалось в невероятно хрупкую структуру. Она ломалась быстрее, чем вы успевали моргнуть.

Для создания структуры страницы появился ещё один мощный инструмент — CSS Grid Layout (зачастую просто сокращают до Grid). CSS Grid Layout, в отличие от Flex, является двумерной системой компоновки контента на странице.

Важно: Grid не является заменой Flex и не создавался с такой целью. Это два разных модуля, которые прекрасно работают друг с другом.

Практика

Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.

В течение курса вы будете встречать самостоятельные задания. При необходимости вы можете попрактиковаться в задачах, представленных в заданиях. Также в них будут примеры кода, в которые можно подглядывать или просто изучать.

CodePen

Другая возможность применить навыки, полученные при работе с курсом — использование сервиса CodePen. Вы можете создать свой pen, внутри которого экспериментировать с позиционированием.

Также в каждом уроке курса будут представлены примеры, которые подгружаются с CodePen. Они доступны для изучения, а также вы имеете возможность в режиме реального времени вносить правки и следить за результатом. Не пропускайте такую возможность.

Как подготовиться к этому курсу

Курс CSS Grid показывает новые возможности по позиционировании элементов на странице. Если на Flex позиционировались небольшие блоки, то Grid позволяет создавать сетки и позиционировать по ним большие блоки страницы: шапка, блоки основного контента, боковые секции и так далее.

Для прохождения курса вам понадобятся базовые знания вёрстки элемента. Эти знания вы можете получить в курсе Основы верстки контента


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Изображение Тото

Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу