CSS Grid Lanes: natywny układ masonry w Safari

Układ masonry, czyli pinterestowa siatka z przesunięciami, w której elementy dowolnego rozmiaru wpływają w dostępną przestrzeń, jest stosowany w środowisku produkcyjnym od ponad dekady, w oparciu o biblioteki JavaScript, właściwości float oraz sztuczki na Flexboksie, które niemal działają, dopóki nie zawiodą.¹ Na konferencji WWDC 2026 zespół Safari w firmie Apple dał sieci natywny tryb układu właśnie do tego celu: CSS Grid Lanes. Sam wzorzec masonry jest stary. Nowością jest pełnoprawny display type w CSS, który tworzy go w trzech liniach, a do tego regulator flow-tolerance, rozwiązujący przewlekły problem kolejności tabulacji i dostępności w układach masonry. Grid Lanes jest dostępny już dziś w Safari 26.4, a w pozostałych przeglądarkach kryje się za flagą.¹

TL;DR

• Grid Lanes to nowy tryb układu w CSS, który plasuje się między Grid a Flexboksem: strukturyzuje tylko jedną oś, drugą pozostawiając swobodną, i rozdziela zawartość na wiele lanes, tworząc ciasno upakowany układ z przesunięciami, który zachowuje naturalne proporcje każdego elementu.¹
• Całość mieści się w trzech liniach: display: grid-lanes, grid-template-columns ze ścieżkami w jednostkach fr oraz gap. Zamiana grid-template-columns na grid-template-rows przekształca wodospad w mur z cegieł. Wybiera się jeden kierunek, nie oba.¹
• Wymiarowanie ścieżek przenosi się wprost z Grid: nierówne proporcje fr, auto-fill z minmax() dla responsywnej liczby kolumn oraz powtarzające się wzory wąskich i szerokich kolumn.¹
• Elementy korzystają z właściwości Grid, które są już znane: grid-column: span 2 do poszerzenia, jawne umieszczanie kolumn oraz grid-template-columns: subgrid, który włącza zawartość karty do układu nadrzędnego. Można sterować umieszczeniem kolumn, lecz nie wierszy; to Grid Lanes decyduje o wierszu.¹
• flow-tolerance to czynnik, który naprawdę odróżnia ten tryb. Umieszczanie wyłącznie według najkrótszej kolumny potrafi sprawić, że kolejność tabulacji zacznie zygzakować względem porządku wizualnego, co szkodzi dostępności. flow-tolerance (wartość domyślna 1em) rozluźnia regułę najkrótszej kolumny, aby umieszczanie ściślej podążało za kolejnością czytania.¹
• Informacja o dostępności jest podana uczciwie: Safari 26.4 zawiera ten tryb już dziś, pozostałe przeglądarki blokują go za flagą. Grid Lanes nie jest jeszcze ogólnie dostępny we wszystkich przeglądarkach.¹

Gdzie Grid Lanes plasuje się między Grid a Flexboksem

Brandon z zespołu Safari buduje układ Grid Lanes od zera, zaczynając od 3:39.

Każdy tryb układu odpowiada na te same dwa pytania: gdzie trafiają elementy i ile przestrzeni otrzymują.¹ Flexbox i Grid odpowiadają na nie odmiennie, a Grid Lanes ląduje pośrodku.

Flexbox daje jedną oś i pojedynczy lane elementów płynących wzdłuż niej; gdy elementy się zawijają, nadal płyną w wybranym kierunku, w wierszu lub w kolumnie.¹ Grid daje dwie osie, kolumny i wiersze, i umieszcza elementy w komórkach na przecięciu tych ścieżek. Problem ujawnia się, gdy elementy mają różne proporcje: powstają duże puste obszary tam, gdzie krótszym elementom nie udaje się wypełnić swoich komórek.¹ W przypadku obrazów pozostają wówczas trzy złe opcje. Rozciągnięcie obrazu, by wypełnił komórkę, zniekształca go; powiększenie, by zająć przestrzeń, sprawia, że obraz wylewa się poza kontener; a przycięcie grozi utratą istotnych informacji.¹

Grid Lanes rozwiązuje to napięcie. Jak ujmuje to prezentacja: „Plasuje się między Grid a Flex. Zamiast strukturyzować w dwóch wymiarach jak Grid, strukturyzuje tylko jeden, a drugi pozostawia swobodny. W przeciwieństwie jednak do Flex, gdzie zawartość płynie w pojedynczym lane i zawija się w dół strony, Grid Lanes rozdziela zawartość na wiele lanes”.¹ Elementy są umieszczane jeden po drugim, a każdy trafia do tej kolumny, która pozostawia go najbliżej góry, dlatego wcześniejsze elementy znajdują się wyżej, a późniejsze wypełniają miejsce poniżej.¹ Układ działa z dowolną zawartością, nie tylko z obrazami: bloki tekstu zawijają się do swojej kolumny, a przeglądarka wylicza ich wysokości, nagłówek zaś może rozciągać się na wiele kolumn, aby się wyróżnić.¹

Natywny masonry w trzech liniach CSS

Budowa zaczyna się od nowego display type, a następnie definiuje ścieżki dokładnie tak, jak robi to Grid:

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

grid-template-columns ustala liczbę ścieżek i szerokość każdej z nich. Jednostka fr („fractional unit”) nakazuje przeglądarce wziąć dostępną przestrzeń w kontenerze i podzielić ją na ułamki, dlatego 1fr 1fr 1fr daje trzy kolumny o równej wielkości, a gap dodaje odstęp dokładnie tak samo jak w Grid.¹ Aby zamienić wodospad w mur z cegieł, należy zamienić kolumny na wiersze: w miejsce grid-template-columns wstawia się grid-template-rows, a wtedy elementy płyną w poprzek, w wierszach, zamiast schodzić w dół w kolumnach. Jedyne zastrzeżenie, słowami z prezentacji: „wybiera się jeden kierunek — nie oba”.¹

Te trzy linie dają więcej kontroli, niż się wydaje. Kolumny nie muszą być równe: środkowa kolumna może zajmować dwukrotnie więcej miejsca niż sąsiednie. Zamiast samodzielnie ustalać liczbę kolumn, można pozwolić zdecydować przeglądarce, tak jak czynią to już responsywne układy Grid:

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

auto-fill tworzy tyle kolumn, ile się zmieści, a minmax() mówi, że każda powinna mieć co najmniej 200 pikseli, lecz może urosnąć, aby wypełnić przestrzeń.¹ Tę samą myśl można rozwinąć jeszcze dalej, stosując powtarzający się wzór wąskich i szerokich kolumn. Korzyść, którą podkreśla Brandon: „najbardziej podoba mi się to, jak wiele można osiągnąć zaledwie kilkoma liniami CSS”.¹

Kształtowanie poszczególnych elementów znanymi właściwościami Grid

Grid Lanes kształtuje elementy za pomocą właściwości, które już istnieją w Grid. Punktem wyjścia niech będzie kontener grid-lanes z trzema równymi kolumnami. Aby dać elementowi więcej miejsca, grid-column: span 2 rozciąga go na dwie kolumny, a reszta układu dopasowuje się wokół niego.¹ Można też umieścić element dokładnie: ustawić, by zaczynał się w kolumnie 2 i rozciągał na kolumny 2 oraz 3. Ograniczenie jest celowe: „można sterować umieszczeniem kolumn, ale nie wierszy. Grid Lanes decyduje o wierszu za użytkownika”.¹

subgrid włącza zawartość zagnieżdżonego komponentu do elementu nadrzędnego. Karta przepisu rozciągnięta na dwie kolumny zawiera obraz i nieco tekstu, które domyślnie nie uczestniczą w układzie Grid Lanes. Po dodaniu do karty display: grid-lanes oraz grid-template-columns: subgrid „jej zawartość dołącza do układu nadrzędnego jako samodzielne elementy”: obraz zajmuje jedną kolumnę, tekst drugą, a każde z nich jest dopasowane wymiarem do swojej zawartości.¹ Zagnieżdżanie działa w obu kierunkach — zwykła siatka wewnątrz kontenera Grid Lanes lub odwrotnie — ponieważ te same narzędzia i ta sama składnia przenoszą się bez zmian.¹

Regulator flow-tolerance: rozwiązanie kwestii dostępności

Oto część, dzięki której Grid Lanes jest czymś więcej niż schludniejszym masonry. Umieszczanie wyłącznie według najkrótszej kolumny wygląda świetnie przez większość czasu, ale czasem coś nie wydaje się do końca w porządku, a powodem jest dostępność.¹

Wyobraźmy sobie dwa elementy w jednym rzędzie o niemal identycznej wysokości, gdzie element 2 jest o kilka pikseli niższy od elementu 1. Obszar pod elementem 2 znajduje się bliżej góry, więc przeglądarka umieszcza tam kolejny element, a element 4 wypełnia pierwszą kolumnę. Wizualny efekt czyta się od lewej do prawej w pierwszym rzędzie i od prawej do lewej w ostatnim. Jak ujmuje to prezentacja: „Rozbieżność między kolejnością tabulacji a tym, jak zawartość pojawia się wizualnie, wpłynie na dostępność dla osób korzystających z niej i może stworzyć mylące doświadczenie”.¹ Kolejność tabulacji podąża za kolejnością w źródle; zygzakowate rozmieszczenie wizualne zrywa zaś odpowiedniość, na której polegają użytkownicy klawiatury i czytnika ekranu.

flow-tolerance to regulator, który rozluźnia lub zacieśnia regułę najkrótszej kolumny.¹ Po jego włączeniu przeglądarka pyta o każdy nowy element: „czy wyższa kolumna jest niższa niż krótsza kolumna powiększona o flow-tolerance?”.¹ Jeśli różnica mieści się w tolerancji, element wypełnia tę kolumnę, która utrzymuje rozmieszczenie zgodne z kolejnością czytania; gdy różnica staje się zbyt duża, by ją zignorować, element trafia do faktycznie krótszej kolumny. Wartość domyślna to 1em:

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  flow-tolerance: 1em;
}

Apple zaleca, by „wypróbować różne wartości flow-tolerance i znaleźć tę, która sprawdza się dla danej zawartości”.¹ Odwrotną stroną dania przeglądarce swobody jest to, że wynik potrafi czasem zaskoczyć, a gdy tak się dzieje, Web Inspector w pełni obsługuje Grid Lanes: po włączeniu nakładki dostępne są linie kolumn i wierszy, numery kolejności rzutowane na każdy element, dzięki czemu widać dokładnie, jak doszło do rozmieszczenia, oraz odstępy narysowane między elementami.¹

Najważniejsze wnioski

Dla programistów frontendu: - Warto zastąpić javascriptowe biblioteki masonry i sztuczki na Flexboksie przez display: grid-lanes, trzy ścieżki fr oraz gap; znane już narzędzia wymiarowania ścieżek z Grid (auto-fill, minmax(), nierówne fr) można wykorzystać ponownie.¹ - Aby wyróżnić elementy, należy sięgnąć po grid-column: span N oraz jawne umieszczanie kolumn, a po grid-template-columns: subgrid, aby włączyć zawartość zagnieżdżonych kart do układu nadrzędnego.¹

Dla zespołów dbających o dostępność: - Warto dostroić flow-tolerance (wartość domyślna 1em), aby rozmieszczenie wizualne podążało za kolejnością w źródle i kolejnością tabulacji, zamykając lukę, jaką zygzakowate rozmieszczenie masonry otwiera dla użytkowników klawiatury i czytnika ekranu.¹ - Rozmieszczenie warto sprawdzić za pomocą nakładki Grid Lanes w Web Inspectorze, która rzutuje numery kolejności elementów bezpośrednio na układ.¹

Dla liderów technicznych planujących wdrożenie: - Grid Lanes należy traktować jako „dostępny w Safari 26.4, za flagą gdzie indziej, niedostępny ogólnie we wszystkich przeglądarkach”; warto wdrożyć go jako progresywne ulepszenie z eleganckim mechanizmem awaryjnym dla przeglądarek wciąż ukrywających go za flagą.¹

FAQ

Czym jest CSS Grid Lanes?

CSS Grid Lanes to nowy tryb układu, który zespół Safari przedstawił na WWDC 2026 do natywnego budowania układów w stylu masonry. Plasuje się między Grid a Flexboksem: strukturyzuje jedną oś, drugą pozostawiając swobodną, i rozdziela elementy na wiele lanes, tworząc ciasno upakowany układ z przesunięciami, który zachowuje naturalne proporcje każdego elementu.¹

Jak zbudować układ masonry za pomocą Grid Lanes?

Trzy linie CSS: należy ustawić display: grid-lanes, zdefiniować ścieżki przez grid-template-columns w jednostkach fr (na przykład 1fr 1fr 1fr dla trzech równych kolumn) i dodać gap. Zamiana grid-template-columns na grid-template-rows przekształca pionowy wodospad w poziomy mur z cegieł. Wybiera się jeden kierunek, nie oba.¹

Co robi flow-tolerance?

flow-tolerance rozluźnia lub zacieśnia regułę, która umieszcza każdy element w najkrótszej kolumnie. Umieszczanie wyłącznie według najkrótszej kolumny potrafi sprawić, że porządek wizualny zacznie zygzakować względem kolejności tabulacji, co szkodzi dostępności. Po włączeniu flow-tolerance przeglądarka, zanim zdecyduje o rozmieszczeniu, sprawdza, czy wyższa kolumna jest niższa niż krótsza kolumna powiększona o tolerancję, i utrzymuje elementy zgodnie z kolejnością czytania, dopóki różnica wysokości nie stanie się zbyt duża. Wartość domyślna to 1em.¹

Czy mogę używać Grid Lanes w środowisku produkcyjnym już dziś?

W Safari 26.4 jest dostępny od teraz. Inne przeglądarki blokują go za flagą, więc Grid Lanes nie jest jeszcze ogólnie dostępny we wszystkich przeglądarkach. Warto wdrożyć go jako progresywne ulepszenie z mechanizmem awaryjnym dla przeglądarek, które wciąż wymagają flagi.¹

Czy Grid Lanes działa z właściwościami Grid, które już znam?

Tak. Rozmieszczanie na poziomie elementu korzysta z istniejących właściwości Grid: grid-column: span 2 poszerza element, jawne umieszczanie kolumn ustala jego pozycję, a grid-template-columns: subgrid włącza zawartość zagnieżdżonego komponentu do układu nadrzędnego. Można sterować umieszczeniem kolumn; o wierszu decyduje Grid Lanes.¹

Gdy zacznie się budowanie i przyda się praktyczne źródło, WebKit utrzymuje oficjalny przewodnik terenowy po Grid Lanes pod adresem gridlanes.webkit.org. Panel zauważył, że Grid Lanes komponuje się z nowym customizable select: układ masonry działa wewnątrz listy rozwijanej ::picker(select).²

Grid Lanes to taki rodzaj rozszerzenia platformy, które usuwa zależność, zamiast ją dodawać, co jest całą tezą manifestu no-build i prostą drogą do rezultatu opisanego w relacji o idealnym wyniku w Lighthouse. Dostarczanie natywnego, semantycznego układu zamiast siatek renderowanych w JavaScript utrzymuje też kod znaczników czytelnym dla maszyn — argument przedstawiony w tekście HTML to format, którego chcą agenci. Pełnym centrum serii jest seria Apple Ecosystem.

Bibliografia