Responsywny grid CSS bez rozpychania kolumn

W skrócie: Gdy sekcja z ofertą, realizacjami albo kontaktem rozpycha stronę na telefonie, użyj CSS Grid z <code>minmax(0, 1fr)</code> i <code>min-width: 0</code>. To prosty sposób na kolumny, które mieszczą się w kontenerze i nie robią poziomego przewijania.

Problem: kolumny rozpychają stronę

Kolumny rozpychają stronę wtedy, gdy ich zawartość jest szersza niż miejsce w układzie. Responsywny grid CSS pomaga szczególnie w sekcjach ofertowych, cennikach, kartach realizacji i układach „treść + boczny panel”, gdzie pojawiają się długie nazwy usług, adresy e-mail albo linki.

Typowy objaw: na laptopie wszystko wygląda dobrze, ale na telefonie pojawia się poziomy scroll. Użytkownik musi przesuwać stronę bokiem, a przyciski CTA uciekają poza ekran. To drobiazg techniczny, ale na stronie firmowej wygląda jak niedoróbka.

Rozwiązanie: responsywny grid CSS z minmax(0, 1fr)

Responsywny grid CSS z minmax(0, 1fr) pozwala kolumnom realnie się zwężać, zamiast trzymać minimalną szerokość wymuszoną przez tekst lub obraz. Skopiuj HTML i CSS poniżej, a potem podmień treści na swoje.

<section class='offer-grid'>
  <article>
    <h2>Strona internetowa dla lokalnej firmy</h2>
    <p>Długi opis usługi, nazwa pakietu albo link nie powinny rozpychać układu na telefonie.</p>
  </article>

  <aside>
    <strong>Kontakt</strong>
    <p>bardzo-dlugi-adres-email-twojej-firmy@example.pl</p>
    <a href='/kontakt/'>Zapytaj o wycenę</a>
  </aside>
</section>

.offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.5rem;
}

.offer-grid > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .offer-grid {
    grid-template-columns: 1fr;
  }
}

Ten układ dobrze pasuje do stron usługowych, lokalnych firm, fundacji i sklepów, gdzie obok opisu chcesz pokazać krótki panel: telefon, e-mail, godziny pracy albo przycisk do kontaktu. Jeśli budujesz całą stronę firmową, zobacz też nasz poradnik o tym, co powinna mieć profesjonalna strona budząca zaufanie.

Jak działa ten kod?

Ten kod tworzy dwie kolumny, które nie wypychają kontenera poza ekran. Najważniejsza jest linia z grid-template-columns.

display: grid włącza układ siatki.
minmax(0, 2fr) mówi: pierwsza kolumna może zejść nawet do zera, ale normalnie ma dostać większą część wolnego miejsca.
minmax(0, 1fr) robi to samo dla bocznego panelu, tylko z mniejszym udziałem szerokości.
min-width: 0 na bezpośrednich dzieciach grida usuwa częsty problem, w którym element nie chce się zwęzić.
overflow-wrap: anywhere pozwala złamać bardzo długi adres e-mail, URL albo nazwę produktu.
Media query ustawia jedną kolumnę na węższych ekranach.

Jeżeli w kartach masz zdjęcia, połącz ten trik z równymi proporcjami obrazów z wpisu o CSS aspect-ratio dla zdjęć. Układ będzie stabilniejszy i bardziej przewidywalny.

Wsparcie przeglądarek

CSS Grid z funkcją minmax() jest szeroko wspierany w nowoczesnych przeglądarkach od 2017 roku. To rozwiązanie należy dziś do bezpiecznych podstaw front-endu, więc możesz używać go na zwykłej stronie WordPress, sklepie WooCommerce albo statycznej stronie HTML.

Dokumentację znajdziesz na MDN: CSS Grid Layout.

Wariant i typowy błąd

Wariant dla kart ofertowych działa podobnie, ale zamiast dwóch stałych kolumn używa automatycznego dopasowania liczby kart do szerokości ekranu.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.card {
  min-width: 0;
  overflow-wrap: anywhere;
}

Typowy błąd to zapis grid-template-columns: 1fr 1fr bez minmax(0, 1fr) i bez min-width: 0. Przy krótkich tekstach wygląda dobrze, ale wystarczy długi link, polska nazwa usługi albo adres e-mail i układ zaczyna się rozjeżdżać.

Dobrze ustawiony grid poprawia czytelność, zmniejsza frustrację użytkownika i pomaga doprowadzić go do kontaktu; jeśli nie chcesz dłubać w CSS samodzielnie, zrobimy to za Ciebie w PEWIT.