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 na coraz szerszym ekranie

Suwak symuluje szerszy ekran, a podgląd skaluje się do ramki. auto-fit dobiera liczbę kolumn z dostępnego miejsca, a każda karta sama przełącza układ z pionowego na poziomy według własnej szerokości. Ramka rezerwuje z góry najwyższy wariant, więc strona pod demo stoi w miejscu.

Szerokość ekranu

symulowany ekran

Identyfikacja Atlas

Branding

Wdrożone

Sklep Novak Studio

E-commerce

W toku

Panel Heliotrop

Aplikacja

Wdrożone

Portfolio Wrzos

Strona

Wycena

Ż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>

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zaimplementuj w moim projekcie wzorzec „Siatka, która płynie" z metodologii Liquid Design.

Kolumny wynikają z dostępnej przestrzeni, a karty przebudowują się według szerokości kontenera, nie ekranu.

Wymagania:
- 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.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/siatki