Responsive CSS Grid cards

auto-fill + minmax() позволяют сетке самостоятельно подстраивать количество колонок без единого media query.

Код

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem">
  <div style="background:#eee;padding:1rem;border-radius:8px">Карточка 1</div>
  <div style="background:#eee;padding:1rem;border-radius:8px">Карточка 2</div>
  <div style="background:#eee;padding:1rem;border-radius:8px">Карточка 3</div>
</div>

Предпросмотр

Пояснение

auto-fill создаёт столько колонок минимум 180px шириной, сколько вмещается в ряд; 1fr растягивает их равномерно на оставшееся пространство.

auto-fit вместо auto-fill растягивает последний неполный ряд карточек на всю ширину, если их мало.

Похожие инструменты

Центрирование элемента по горизонтали и вертикали

Самый простой современный способ отцентрировать блок через flexbox.