Wzorzec 03

Siatka, która płynie

Sztywne breakpointy opisują ekran, ale komponent żyje w kontenerze: raz w pełnej szerokości strony, raz w wąskiej kolumnie panelu. Auto-fit z funkcją minmax ustala liczbę kolumn, a container queries pozwalają karcie samodzielnie wybrać wewnętrzny układ.

Siatka projektów w zmiennym kontenerze

Zwężaj scenę: auto-fit dobiera liczbę kolumn, a każda karta sama przełącza układ z poziomego na pionowy według własnej szerokości. Ramka rezerwuje wysokość najwęższej sceny, więc strona pod demo stoi w miejscu.

Szerokość sceny100%

Identyfikacja Atlas

Branding

Sklep Novak Studio

E-commerce

Panel Heliotrop

Aplikacja

Portfolio Wrzos

Strona

Żaden fragment tego demo nie pyta o szerokość ekranu. Siatka liczy kolumny z dostępnego miejsca, a karty czytają wyłącznie własny kontener.

Reguły

repeat(auto-fit, minmax(...)) zamiast ręcznie wyliczanych kolumn na breakpointach.
Karta obserwuje własny kontener przez container queries i sama decyduje o układzie.
Minimalna szerokość kolumny chroni długość wiersza i wygodę dotyku.
Ten sam komponent działa w każdym slocie layoutu bez wariantów pisanych pod ekran.

Wzorzec w kodzie

Auto-fit z minmax liczy kolumny z dostępnego miejsca

.project-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

Karta czyta własny kontener i sama wybiera układ

<div className="@container">
  <article className="flex flex-col gap-3 @[17rem]:flex-row @[17rem]:items-center">
    <Avatar />
    <Header />
    <Badge>{role}</Badge>
  </article>
</div>