Урок 22 · CSS

Шапка, текст и боковая колонка

Страница — это не лента на всю ширину монитора. Сетка ограничивает текст и на широком экране ставит колонку рядом.

Почему это следующий шаг

Мелкие переходы готовы. Осталось собрать целый макет из уже сделанных кусков.

Как сделать

Оберни содержимое в контейнер с шириной min(100% - 2rem, 72rem) и центровкой. На узком экране колонки стоят друг под другом. На широком — боковая навигация и текст в две колонки через grid. Не фиксируй высоту секций: контент должен расти. Шапка может быть на всю ширину, а текст внутри той же меры, что и main.

.wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
@media (min-width: 56rem) {
  .layout { display: grid; grid-template-columns: 16rem 1fr; gap: 2rem; }
}

Что проверить

• Строка текста не растянута на огромный монитор.
• На телефоне одна колонка.
• Боковая колонка не наезжает на текст.