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.