CSS Grid для адаптивних карток симуляцій

Один рядок, що робить усе

На сторінках каталогу симуляцій виводяться десятки карток. На широкому моніторі вони мають розташовуватись у 4-5 колонок, на телефоні — в 1-2. Класичний підхід вимагає трьох-чотирьох точок переходу через @media. Підхід на CSS Grid потребує рівно цього:

.sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

Оце і все. Жодних точок переходу. Жодного JavaScript. Змінюєте розмір вікна браузера — і сітка автоматично перебудовується.

Живе демо (перетягніть кут, щоб змінити розмір)

↔ Перетягніть правий край демо-блоку, щоб побачити, як сітка перебудовується.

Як це працює

repeat(auto-fill, …) каже браузеру: «створи стільки колонок, скільки поміститься». minmax(260px, 1fr) означає: «кожна колонка щонайменше 260px завширшки, але рівномірно зростає, щоб заповнити простір, що залишився».

Тож при ширині 800px із проміжком 1rem поміщається 2 × 260px + проміжок = ~532px → 3 колонки майже вміщуються → отримуємо 2 колонки, кожна зростає до ~395px. Математика розраховується автоматично.

auto-fill проти auto-fit

Є два ключових слова — вони відрізняються лише тоді, коли елементи не заповнюють увесь рядок повністю:

• auto-fill — залишає порожні колонки в неявній сітці. Картки не розтягуються за межі максимальної ширини на великих екранах.
• auto-fit — згортає порожні колонки. Якщо у вас 2 картки в просторі на 4 колонки, з auto-fit кожна займе половину ширини, а з auto-fill залишиться 260px.

Використовуйте auto-fill, коли у вас відома мінімальна ширина картки і ви не хочете, щоб картки розтягувалися занадто широко. Використовуйте auto-fit, коли хочете, щоб картки завжди заповнювали весь контейнер.

Додавання обмеження max-width

/* Запобігаємо надто широким карткам на великих екранах */
.sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  max-width: 1400px;
  margin-inline: auto;
}

/* Або обмежити ширину картки напряму: */
.sim-card {
  max-width: 380px;
}

Сама картка

Шаблон картки, використаний тут: підсвітка рамки при наведенні, мініатюра з фіксованим співвідношенням сторін, трансформація масштабу та відступи, що вміщують текст без переповнення:

.sim-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.sim-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.sim-card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  overflow: hidden;
}

.sim-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.sim-card-body {
  padding: 0.9rem 1rem;
}

.sim-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: 0.25rem;
}