Как сделать две колонки
Короткий ответ
Сетка из двух равных колонок:
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
<div style="padding: 12px; background: lavender;">Left column</div>
<div style="padding: 12px; background: honeydew;">Right column</div>
</div>Единица fr — доля свободного места: 1fr 1fr делит его пополам, 2fr 1fr — в отношении два к одному.
Боковая панель и содержимое
Первая колонка фиксированная, вторая занимает остаток:
<div style="display: grid; grid-template-columns: 140px 1fr; gap: 16px;">
<div style="padding: 12px; background: lavender;">Menu</div>
<div style="padding: 12px; background: honeydew;">Main content</div>
</div>То же на flexbox
flex: 1 делит ширину поровну между колонками:
<div style="display: flex; gap: 16px;">
<div style="flex: 1; padding: 12px; background: lavender;">One</div>
<div style="flex: 1; padding: 12px; background: honeydew;">Two</div>
</div>Одна колонка на телефоне
Колонки включаются только на широком экране:
<style>
.cols { display: grid; gap: 16px; }
.cols div { padding: 12px; background: lightyellow; }
@media (min-width: 500px) { .cols { grid-template-columns: 1fr 1fr; } }
</style>
<div class="cols"><div>First</div><div>Second</div></div>Частая ошибка
Колонки через width: 50% и float ломаются, как только появляются отступы или рамка: две половины плюс padding уже больше 100%, и вторая колонка падает вниз. Grid и flexbox с gap считают промежутки сами — используйте их.
Функции из этого ответа
- grid-template-columns — Количество и ширина колонок сетки.
- gap — Промежутки между элементами во flexbox и grid.
- flex — Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.
- @media — Применяет правила только при заданных условиях — ширине окна, теме системы и других.