CSS Grid dla responsywnych kart symulacji

Jedna linia, która robi wszystko

Strony indeksujące symulacje wyświetlają dziesiątki kart. Na szerokim monitorze powinny pojawiać się w 4 lub 5 kolumnach; na telefonie w 1 lub 2. Klasyczne podejście wymaga trzech lub czterech punktów przełamania @media. Podejście z CSS Grid wymaga dokładnie tego:

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

To wszystko. Żadnych punktów przełamania. Żadnego JavaScriptu. Zmień rozmiar przeglądarki, a siatka przeukłada się automatycznie.

Demo na żywo (przeciągnij róg, aby zmienić rozmiar)

↔ Przeciągnij prawą krawędź ramki demo, aby zobaczyć przeukładanie siatki.

Jak to działa

repeat(auto-fill, …) mówi przeglądarce: „utwórz tyle kolumn, ile się zmieści". minmax(260px, 1fr) oznacza: „każda kolumna ma co najmniej 260px szerokości, ale rośnie równo, aby wypełnić pozostałe miejsce".

Przy szerokości 800px i odstępie 1rem, mieszczą się 2 × 260px + odstęp = ~532px → 3 kolumny prawie się mieszczą → 2 kolumny, każda rosnąca do ~395px. Matematyka rozwiązuje się automatycznie.

auto-fill vs auto-fit

Istnieją dwa słowa kluczowe — różnią się tylko wtedy, gdy elementy nie wypełniają całego wiersza:

• auto-fill — zachowuje puste kolumny w niejawnej siatce. Karty nie rozciągają się poza swoją maksymalną szerokość na dużych ekranach.
• auto-fit — zwija puste kolumny. Jeśli masz 2 karty w przestrzeni na 4 kolumny, z auto-fit każda zajmie połowę szerokości, ale z auto-fill pozostaną przy 260px.

Używaj auto-fill, gdy znasz minimalną szerokość karty i nie chcesz, żeby karty rozciągały się zbyt szeroko. Używaj auto-fit, gdy chcesz, żeby karty zawsze wypełniały cały kontener.

Dodanie limitu max-width

/* Zapobiega bardzo szerokim kartom na dużych ekranach */
.sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  max-width: 1400px;
  margin-inline: auto;
}

/* Albo ogranicz szerokość karty bezpośrednio: */
.sim-card {
  max-width: 380px;
}

Sama karta

Wzorzec karty używany tutaj: poświata obramowania przy hover, miniatura z aspect-ratio, transformacja skali oraz padding, który mieści tekst bez przepełnienia:

.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;
}