Адаптивная верстка

Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах.

Медиазапросы (@media)

Синтаксис:

@media screen and (max-width: 768px) {
    /* Стили для планшетов и телефонов */
}

Одномерная модель раскладки (по одной оси).

Контейнер: display: flex; / inline-flex;.
Направление: flex-direction: row | column | row-reverse.
Перенос: flex-wrap: wrap | nowrap.
Выравнивание по главной оси: justify-content: flex-start | center | space-between | space-around.
Выравнивание по поперечной оси: align-items: center | stretch.
Свойства элементов:
- flex-grow (коэффициент роста),
- flex-shrink (сжатие),
- flex-basis (базовый размер),
- order (порядок отображения).

Двумерная модель раскладки (строки + столбцы).

Контейнер: display: grid;.
Определение сетки:
- grid-template-columns: repeat(3, 1fr); (3 колонки равной ширины).
- grid-template-rows: auto 1fr;.
Единица fr: Доля свободного пространства.
Отступы: gap: 10px;.
Размещение элементов:
- grid-column: 1 / 3; (от 1-й до 3-й линии).
- grid-row: 2 / span 2; (со 2-й линии на 2 ячейки).
Именованные области:

.container {
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}
header { grid-area: header; }

Flexbox: Лучше для одномерных структур (меню, тулбары) и распределения пространства между элементами.
Grid: Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.