Układ masonry: podejścia CSS i JavaScript

Układ masonry umieszcza elementy w kolumnach, w których każdy element wypełnia następną dostępną przestrzeń w pionie, podobnie jak na Pintereście. Elementy mają jednakową szerokość kolumn, ale różne wysokości. Rezultat to gęsta, dynamiczna wizualnie siatka bez niewykorzystanej pustej przestrzeni między wierszami.

Chrome i Firefox, po włączeniu odpowiedniej flagi, obsługują grid-template-rows: masonry. Elementy są umieszczane w kolumnach, ale wysokość wierszy jest dopasowywana do treści, dzięki czemu elementy o różnej wysokości układają się bez przerw. To przyszłe natywne rozwiązanie.

Kolumny CSS umożliwiają utworzenie układu przypominającego masonry: columns: 3; column-gap: 1rem. Elementy automatycznie przepływają z góry na dół w obrębie każdej kolumny. Ograniczenie polega na tym, że elementy są uporządkowane kolumnami (góra kolumny 1, góra kolumny 2 itd.), a nie wierszami, co wpływa na kolejność czytania i dostępność.

Aby zapobiec łamaniu elementów między kolumnami, użyj break-inside: avoid na każdym elemencie. Bez tego wysoka karta może zostać podzielona między dwie kolumny, przecinając treść na pół. Tej właściwości należy zawsze używać przy stosowaniu CSS Columns do treści przypominającej karty.

Masonry.js (autorstwa Davida DeSandro) ponownie rozmieszcza elementy pozycjonowane absolutnie, obliczając wysokości kolumn i umieszczając każdy element w najniższej kolumnie. Isotope rozszerza to rozwiązanie o sortowanie i filtrowanie. Obie biblioteki wymagają użycia JavaScriptu do obliczania i stosowania pozycji.

Lekkie podejście polega na zdefiniowaniu siatki ze stałymi kolumnami i wierszami o wysokości 1 px, a następnie użyciu JS do ustawienia grid-row-end: span N dla każdego elementu na podstawie jego wysokości treści i wysokości wiersza. Elementy zachowują wyrównanie względem wierszy siatki, a jednocześnie mogą mieć różne wysokości.

Pozycje w układzie masonry stają się nieaktualne po zmianie rozmiaru okna lub załadowaniu obrazów. Użyj ResizeObserver, aby wykrywać zmiany rozmiaru i uruchamiać ponowne obliczenia. Ponowne obliczenia należy opóźniać za pomocą debounce, aby uniknąć nadmiernych obliczeń podczas szybkiej zmiany rozmiaru.

Obrazy o nieznanej wysokości powodują ponowne obliczenie układu masonry po załadowaniu. Wszystkim obrazom należy podać jawne atrybuty width i height, aby przeglądarka zarezerwowała miejsce przed ich załadowaniem. Zapobiega to przesuwaniu pozycji i zmniejsza liczbę przebiegów ponownego obliczania.

Dodawanie elementów do układu masonry wymaga ponownego obliczenia tylko tych kolumn, których dotyczy zmiana (zawierających nowe elementy), a nie całej siatki. Biblioteki takie jak Masonry.js obsługują animowanie dodawanych elementów i przyrostowy układ bez pełnego rozmieszczania przy każdej nowej partii.

Wizualna kolejność elementów w układach pozycjonowanych za pomocą JavaScriptu różni się od kolejności w DOM. Należy zadbać, aby kolejność przechodzenia klawiszem Tab była zgodna z kolejnością w DOM (logiczną kolejnością czytania), a nie z pozycją wizualną. Atrybutu tabindex należy używać ostrożnie lub polegać na naturalnym przepływie DOM podczas nawigacji za pomocą klawiatury.

CSS Columns są proste i nie wymagają JS, ale zapewniają kolejność czytania kolumnami, a nie wierszami, oraz nie obsługują filtrowania ani sortowania. Masonry w Gridzie nie jest jeszcze obsługiwane produkcyjnie. Masonry oparte na JS jest w pełni funkcjonalne, ale zwiększa rozmiar rozwiązania i powoduje opóźnienie renderowania, ponieważ pozycje są obliczane dopiero po załadowaniu treści.

Układ masonry można uzyskać za pomocą CSS Columns (proste rozwiązanie uporządkowane kolumnami), eksperymentalnego grid-template-rows: masonry (rozwiązanie przyszłościowe) lub bibliotek JavaScript, takich jak Masonry.js (pełna funkcjonalność z sortowaniem i filtrowaniem). Każde podejście wiąże się z kompromisami dotyczącymi prostoty, dostępności i możliwości.