Как сделать резиновую сетку из двух одинаковых колонок с помощью CSS Grid?

CSS Grid — это двумерная система раскладки, которая позволяет описывать строки и колонки одновременно. Для двух одинаковых резиновых колонок достаточно задать контейнеру свойство display: grid и определить шаблон колонок через grid-template-columns.

Единица fr

Ключевой инструмент — единица fr (fraction). Она означает долю свободного пространства контейнера. Если указать 1fr 1fr, браузер делит доступную ширину на две равные части, и каждая колонка получает ровно половину. При изменении ширины окна колонки пересчитываются автоматически, поэтому сетка остаётся резиновой.

Пример

<div class="grid">
  <div>Колонка 1</div>
  <div>Колонка 2</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
</style>

Свойство gap задаёт отступ между колонками, не ломая их равенство. Если нужно, чтобы колонки не сжимались слишком сильно, можно использовать minmax(0, 1fr) — это предотвращает переполнение содержимым.

Где применяется

• Двухколоночные макеты: контент и сайдбар.
• Карточки товаров, статей, галереи.
• Формы с двумя полями в ряд.

В отличие от Flexbox, Grid сразу описывает структуру сетки, что делает код декларативнее и проще для чтения.

Итог: применяй grid-template-columns: 1fr 1fr, когда нужны две равные резиновые колонки без сложных медиазапросов — это лаконично и надёжно.