[moscoding.ru] Вёрстка на CSS Grid [Илья Бодров]

[moscoding.ru] Вёрстка на CSS Grid [Илья Бодров]

Влихие 90-е мы верстали как могли — на флоатах, таблицах и на стиральной машинке. Голь была хитра на разные хаки, триксы и прочие «воркараунды», превращавшие верстку тривиального макета в лазерную капоэйру. Когда появились гриды это сперва выглядело как пранк Николая Соболева — непохожий ни на что синтаксис, новый юнит измерения, адаптивность «из коробки» и подкупающе простая реализация большинства классических лэйаутов.​

На курсы Вы научитесь:

• Понимать основные способы и приемы верстки
• Понимать принципы работы сетки
• Точно позиционировать элементы на странице
• Внедрять респонсивность
• Комбинировать сетку CSS с другими технологиями
• Поддерживать устаревшие браузеры

​

Спойлер: Программа курса

Сетка CSS:

• Как работает CSS Grid
• Основные понятия
• Поддержка браузерами
• Сетка CSS на примере

Cтруктура сайта:

• Планирование сетки
• Единица измерения fr
• Разбиение на области
• Выравнивание контента

Функции и свойства:

• Автоматическое размещение
• repeat, minmax, auto-fit, auto-fill

Респонсивная вёрстка:

• Планирование сетки
• Сетка CSS и media-запросы

Обратная совместимость:

• Статистика использования браузеров
• Метод supports
• Отступы и flexbox

Поддержка устаревших браузеров:

• Проблемы поддержки сетки в Internet Explorer
• Внедрение поддержки устаревших браузеров