Wzorzec 04

Kafelki w równym rytmie

Siatka kart z justify-between rozjeżdża się przy pierwszej dłuższej treści: każdy kafelek rozkłada wolną przestrzeń po swojemu i nagłówki lądują na różnych wysokościach. Subgrid oddaje wiersze kart rodzicowi, więc cały rząd dzieli jedną geometrię bez zgadywania minimalnych wysokości.

Dwa kafelki, różna ilość treści

Po lewej każdy kafelek rozkłada wolną przestrzeń po swojemu. Po prawej wiersze należą do wspólnej siatki i wszystko leży w jednym rytmie.

✕ justify-between w kafelku

Branding

Atlas

Identyfikacja i prosta strona.

Zobacz projekt →

Aplikacja

Panel Heliotrop dla zespołów

Analityka, poziomy uprawnień i raporty tygodniowe wysyłane prosto do klienta.

Zobacz projekt →

✓ wspólne wiersze przez subgrid

Branding

Atlas

Identyfikacja i prosta strona.

Zobacz projekt →

Aplikacja

Panel Heliotrop dla zespołów

Analityka, poziomy uprawnień i raporty tygodniowe wysyłane prosto do klienta.

Zobacz projekt →

Reguły

Kafelek dziedziczy wiersze z rodzica przez grid-template-rows: subgrid i rozpięcie row-span.
Nagłówki, opisy i stopki sąsiednich kart leżą na wspólnych liniach niezależnie od długości treści.
Wyrównanie nie wymaga min-height, sztucznych odstępów ani przycinania treści do wymyślonej liczby linii.
W pojedynczej kolumnie subgrid niczego nie zmienia, więc układ mobilny nie potrzebuje wyjątków.

Wzorzec w kodzie

Kafelek rozpina się na trzy wiersze rodzica i dziedziczy ich geometrię

<div className="grid gap-4 sm:grid-cols-2">
  {cards.map((card) => (
    <a
      key={card.slug}
      className="grid row-span-3 grid-rows-subgrid gap-y-4 rounded-2xl border p-6"
    >
      <p className="font-mono">{card.number}</p>
      <h3 className="text-xl font-semibold">{card.title}</h3>
      <p className="text-sm">{card.description}</p>
    </a>
  ))}
</div>

Ten sam wzorzec zapisany czystym CSS

.tile {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 1rem;
}

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 „Kafelki w równym rytmie" z metodologii Liquid Design.

Nagłówki, opisy i stopki sąsiednich kart leżą na wspólnych liniach, bo wiersze kafelków pochodzą z jednej siatki.

Wymagania:
- Kafelek dziedziczy wiersze z rodzica przez grid-template-rows: subgrid i rozpięcie row-span.
- Nagłówki, opisy i stopki sąsiednich kart leżą na wspólnych liniach niezależnie od długości treści.
- Wyrównanie nie wymaga min-height, sztucznych odstępów ani przycinania treści do wymyślonej liczby linii.
- W pojedynczej kolumnie subgrid niczego nie zmienia, więc układ mobilny nie potrzebuje wyjątków.

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/kafelki