Fundamenty Układ i siatki
Fundamenty
Układ i siatki
Treść wypełnia całą szerokość, a stałą ramkę dają boczne guttery (do 64 px). Dzięki temu margines jest zawsze taki sam, zamiast rosnąć na szerokich ekranach. Czytelność długich bloków chronią ich własne max-w-*.
Gutter – margines boczny
Custom utility eliminujące powtarzany łańcuch px-5 sm:px-8 lg:px-12. Padding rośnie skokowo z szerokością ekranu.
@utility gutter {
padding-inline: 1.25rem; /* 20px */
@media (width >= 40rem) { padding-inline: 2rem; } /* 32px */
@media (width >= 64rem) { padding-inline: 3rem; } /* 48px */
@media (width >= 80rem) { padding-inline: 4rem; } /* 64px */
}Kontenery
Szerokości definiowane w @theme generują utilisy max-w-*. Pełen bleed jest domyślny; węższe shelle stosujemy do tekstu.
| Token | Wartość | Zastosowanie |
|---|---|---|
| gutter | 20 → 32 → 48 → 64 px | Stały margines boczny strony (padding-inline responsywny) |
| max-w-page | none | Brak twardego capa – pełny bleed, ramkę dają guttery |
| max-w-readable | 76rem | Shell sekcji tekstowych, które nie idą w pełny bleed |
| .prose | 74ch | Komfortowa długość wiersza w artykułach |
| content-shift | clamp(0, …, 8rem) | Przesunięcie kolumny treści w prawo, gdy jest miejsce |
Siatka płynna (grid-fluid)
Kolumny dobierają się same: karty najpierw się powiększają (1fr), a nowa kolumna pojawia się dopiero, gdy jest miejsce na --col-min. auto-fit zwija puste tory.
<div class="grid-fluid gap-6 [--col-min:18rem]">
<article>…</article>
<article>…</article>
</div>Wariant grid-fluid-fill (auto-fill) zostawia puste kolumny po prawej zamiast powiększać kafelki – dla zdjęć zespołu i liczb.
Breakpointy
Domyślne progi Tailwind. Projektujemy mobile-first – modyfikatory dokładają zmiany w górę.