CSS Grid — Subgrid i Masonry

CSS Grid — podstawy, grid-template-areas i named grid lines?

CSS Grid: dwuwymiarowy układ. Wiersze i kolumny jednocześnie. display: grid. grid-template-columns: repeat(3, 1fr) — 3 równe kolumny. grid-template-rows: auto 1fr auto. grid-gap: 16px (lub gap). Grid areas (named): grid-template-areas: 'header header header' 'sidebar main main' 'footer footer footer'. Elementy: header { grid-area: header } sidebar { grid-area: sidebar } main { grid-area: main }. Named grid lines: grid-template-columns: [start] 1fr [content-start] 3fr [content-end] 1fr [end]. Linie z nazwami — lepsza czytelność. grid-column: content-start / content-end. auto-fill vs auto-fit: repeat(auto-fill, minmax(250px, 1fr)) — tworzy puste kolumny. repeat(auto-fit, minmax(250px, 1fr)) — rozciąga elementy. auto-fit dla responsywnych grid bez media queries. minmax: minmax(200px, 1fr) — min 200px, max 1 fr. fit-content(300px) — shrink-wrap do 300px. Placement: grid-column: 1 / 3 — od linii 1 do 3. grid-column: span 2 — rozpięty na 2 kolumny. grid-row: 1 / -1 — cała wysokość. -1 = ostatnia linia. auto placement: grid-auto-flow: dense — wypełnia luki. Przydatne dla masonry-like layout. grid-auto-rows: minmax(100px, auto) — automatyczne wiersze.

CSS Subgrid — jak działa i kiedy go używać?

Subgrid: potomek dziedziczy linie grid od rodzica. Wsparcie: Chrome 117+, Safari 16+, Firefox 71+. Problem bez subgrid: Card grid — różne wysokości treści. Chcemy wyrównać nagłówki i footery kart. Każda karta ma własny grid — nie można wyrównać. Subgrid rozwiązanie: .cards-grid { display: grid. grid-template-columns: repeat(3, 1fr). grid-template-rows: auto. gap: 16px }. .card { display: grid. grid-row: span 3. grid-template-rows: subgrid }. .card-header { /* wyrównany z innymi kartami */ }. .card-body { /* wyrównany */ }. .card-footer { /* wyrównany */ }. Subgrid działa na: grid-template-columns: subgrid — dziedziczy kolumny rodzica. grid-template-rows: subgrid — dziedziczy wiersze rodzica. Można używać obu razem. Named lines w subgrid: Linie rodzica dostępne w potomku. Responsive subgrid: @container + subgrid. Card komponenty skalują się i wyrównują. Nested subgrid: dzieci subgrid też mogą być subgrid. Głęboka hierarchia wyrównana. Użycie z CSS Grid masonry: grid-template-rows: masonry (eksperymentalne). Subgrid + masonry w przyszłości. Footer wyrównanie: grid-template-rows: 1fr subgrid działa dla footer-at-bottom bez flexbox tricks. Tabele z subgrid: lepsza dostępność niż display: table. Zachowuje semantykę HTML.

CSS Masonry Layout — natywne i alternatywy?

CSS Masonry: układ jak Pinterest, Unsplash. Kolumny o różnych wysokościach. Elementy wypełniają luki. Natywny CSS Masonry (eksperymentalny): display: grid. grid-template-columns: repeat(3, 1fr). grid-template-rows: masonry. Tylko Firefox (za flagą) i Safari TP. Chrome — planowane. Nie gotowe na produkcję. Alternatywy CSS-only: CSS columns: column-count: 3. column-gap: 16px. Problemy: kolejność top-to-bottom (nie left-to-right). Brak kontroli nad break. JavaScript Masonry: Masonry.js (David DeSandro). masonry-layout npm. colcade — nowoczesna alternatywa. React biblioteki: react-masonry-css — CSS-only, lightweight. react-masonry-component — Masonry.js wrapper. @egjs/react-infinitegrid — zaawansowany. Virtualized masonry: @tanstack/react-virtual. Wirtualizacja dla dużych list. Masonry + virtual = wydajne Pinterest. CSS Columns + order: flexbox z column direction. flex-wrap: wrap. Elementy nie idealnie równe. CSS Grid + dense: auto-flow: column dense. Nie true masonry ale podobny efekt. Intersection Observer dla lazy load: ładuj obrazy przy wejściu w viewport. Masonry + lazy = wydajne. ResizeObserver: przelicz masonry przy zmianie rozmiarów. Responsive kolumny.

Zaawansowane wzorce Grid — Holy Grail, Card layouts i responsywność?

Holy Grail Layout (nowoczesny): body { display: grid. grid-template: 'header' auto 'main' 1fr 'footer' auto / 1fr }. main { display: grid. grid-template-columns: 200px 1fr 200px }. Bez hacków float/position. Flexbox + Grid: Grid dla page layout (2D). Flexbox dla component layout (1D). Wzorzec: Grid outer, Flex inner. Card Grid responsive: .cards { display: grid. grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)). gap: 1rem }. Bez media queries — fluid responsywność. min() dla small screens. Sidebar layout: grid-template-columns: min(30ch, 100%) 1fr. Sidebar max 30 znaków szerokości. Fluid type + Grid: clamp(1rem, 2.5vw, 2rem). Responsywne bez media queries. CSS Grid + custom properties: --cols: 3. grid-template-columns: repeat(var(--cols), 1fr). JavaScript: el.style.setProperty('--cols', 2). Container Queries + Grid: @container (min-width: 600px) { grid-template-columns: repeat(3, 1fr) }. Layout zmienia się na podstawie kontenera nie viewportu. Stack pattern: .stack { display: grid. gap: 1rem } — pionowy spacing. Lepszy niż margin-bottom. Cluster pattern: .cluster { display: flex. flex-wrap: wrap. gap: 1rem }. Center pattern: .center { display: grid. place-items: center }. Switcher pattern: .switcher { display: flex. flex-wrap: wrap. --threshold: 40rem }. > * { flex-basis: calc((var(--threshold) - 100%) * 999) }.

CSS Grid a11y, animacje i pułapki?

Grid i dostępność: order property zmienia wizualną kolejność. NIE zmienia DOM kolejności. Screen reader czyta DOM kolejność. Unikaj order dla interaktywnych elementów. Używaj grid-auto-flow dla naturalnej kolejności. Tabindex przy reorderze. CSS Grid animacje: gap animacja: gap jest animowalna (Chrome 99+). grid-template-columns zmiana — animowalna. transition: grid-template-columns 0.3s ease. Sidebar collapse animacja. Masonry reveal: @keyframes fadeIn z grid. stagger przez nth-child delays. Grid Layout i print: @media print { grid-template-columns: 1fr }. Drukowanie bez sidebar. Grid i overflow: minmax(0, 1fr) zamiast 1fr — bez overflow. 1fr = minmax(auto, 1fr) = min jest auto (rozmiar contentu). minmax(0, 1fr) = faktycznie równe kolumny. Pułapki: grid-template-columns: 100px repeat(2, 1fr) — łatwo pomylić kolejność. grid-area shorthand: row-start/col-start/row-end/col-end — odwrotna kolejność niż CSS margin. Implicit vs explicit grid: grid-template definiuje explicit. Elementy poza explicit — implicit (grid-auto-rows). Negative line numbers tylko explicit. Narzędzia: Firefox Grid Inspector (najlepszy). Chrome Grid Inspector. Grid.Guide visualizer. CSS Grid Generator (cssgrid.io). Layout Land (Jen Simmons) — kanał YouTube. grid-template-areas ASCII art. Wizualne debugowanie.

Wyślij zapytanie