📦

Модуль 2.3: CSS Layout

Поток документа

Normal Flow: как браузер расставляет элементы по умолчанию. Блочные, строчные, inline-block - и почему margin иногда ведёт себя странно.

Свойство position: static, relative, absolute, fixed, sticky. Как вырвать элемент из потока и поставить куда хочешь.

Flexbox - инструмент для одномерных layouts. Выравнивание, распределение пространства, центрирование - всё становится тривиальным.

flex-grow, flex-shrink, flex-basis - контролируем размеры элементов. Плюс wrap, order и margin: auto трюки.

CSS Grid - двумерные layouts. Строки и колонки одновременно, сложные макеты без хаков.

grid-template-areas, именованные линии, auto-flow dense - создаём сложные layouts наглядно и просто.

Flex и Grid - не конкуренты, а напарники. Разбираемся, когда использовать что.

Собираем полноценный layout: шапка, сайдбар, контент, подвал. Grid для структуры, Flex для компонентов.