PRO курс

CSS: Grid

68 сообщений в сообществе 379 учащихся

Курс посвящён модулю CSS Grid Layout — технологичному инструменту для создания сеток в CSS. После прихода модуля Flex появилась потребность в контролировании элементов по двум осям одновременно. Разработчики хотели взять систему сеток, которая используется в печатной продукции сотню лет. Для этого использовали табличную вёрстку, вёрстку с помощью Float и Flex. Каждый из этих способов имел ограничения и сложности при разработке. CSS Grid Layout появился в 2011 году и за много лет приобрёл множество свойств и подходов, которые упрощают создание макетов с помощью CSS.

Чему вы научитесь:

  • Базовым свойствам CSS Grid Layout.
  • Создавать сетки и управлять пространством внутри них.
  • Управлять расположением HTML-элементов внутри сетки.
  • Адаптировать сетки для разных разрешений экрана.
CSS3 Grid Сетки Адаптивность
Последнее обновление: 23 октября 2020

Уроки курса

  • 1

    Введение

    Познакомиться с концепцией Grid. Узнать о ключевых моментах и отличиях от Flex
  • 2

    Терминология

    Познакомиться с понятиями сеток и их составлящими в CSS Grid Layout

    тесты

  • 3

    Первая сетка

    Узнать о свойствах, позволяющие создавать сетки с помощью CSS Grid Layout. Создать первую 12 колоночную сетку. Познакомиться с единицами измерения fr

    тесты

    упражнение

  • 4

    Расположение элементов в сетке

    Изучить свойства, позволяющие произвольно располагать элементы внутри сетки. Научиться именовать линии/области и использовать их при расположении элементов.

    тесты

  • 5

    Работа с сеткой

    Изучить отступы между полосами и выравнивание полос сетки.

    тесты

    упражнение

  • 6

    Неявная сетка

    Узнать отличия явной и неявной сетки. Изучить свойства grid-auto-rows и grid-auto-columns

    тесты

  • 7

    Позиционирование и Grid

    Изучить влияние свойств позиционирования и z-index при использовании внутри сетки

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки.

# Задание % завершений
1 Швейцарский плакат 69%
2 Неопластицизм 81%

Автор

Аватар пользователя Nikita Mikhaylov

Никита Михайлов

Ключевые навыки: HTML, CSS, JS Frontend.

Много лет работал в аутсорсинговой компании. Развивал клиентские проекты, делал фичи для разных CMS. В основном верстал, готов передать весь опыт вам. Поработав с сотнями проектов, научился выкручиваться даже из самых безнадёжных ситуаций. Помогу освоить вёрстку, чтобы она перестала казаться чем-то страшным.

Курс CSS: Grid
продолжительность
5 часов
награда
29 баллов