Как сделать раскладку с боковой панелью
Короткий ответ
Колонка фиксированной ширины и колонка на всё остальное:
<style>
.layout { display: grid; grid-template-columns: 160px 1fr; gap: 12px; }
.layout aside { padding: 12px; background: lavender; }
.layout main { padding: 12px; background: whitesmoke; }
</style>
<div class="layout">
<aside>Categories</aside>
<main>Article text goes here.</main>
</div>Гибкая ширина панели
clamp() не даёт панели стать слишком узкой или широкой:
.layout { grid-template-columns: clamp(140px, 25%, 260px) 1fr; }Панель на телефоне
На узком экране две колонки тесно. Сделайте одну колонку по умолчанию и включите две через медиазапрос:
<style>
.wrap { display: grid; gap: 12px; }
.wrap aside { padding: 12px; background: lavender; }
.wrap main { padding: 12px; background: whitesmoke; }
@media (min-width: 480px) { .wrap { grid-template-columns: 160px 1fr; } }
</style>
<div class="wrap"><aside>Filters</aside><main>Products</main></div>Частая ошибка
Если в main попадёт длинная строка без пробелов или широкая таблица, колонка 1fr раздвинется и вытолкнет страницу вбок: у элементов сетки минимальная ширина равна содержимому. Пишите minmax(0, 1fr) вместо 1fr — тогда колонка сможет сжиматься.
Функции из этого ответа
- grid-template-columns — Количество и ширина колонок сетки.
- minmax() — Размер дорожки сетки между минимумом и максимумом.
- clamp() — Держит значение в пределах: желаемое, но не меньше минимума и не больше максимума.
- @media — Применяет правила только при заданных условиях — ширине окна, теме системы и других.