Cegła po cegle: pomóż nam zbudować CSS Masonry

Patrick Brosset

Alison Maher

Data publikacji: 23 lipca 2025 r.

Zespoły Microsoft Edge i Google Chrome z przyjemnością informują, że CSS masonry jest gotowy do wczesnych testów deweloperskich w Chrome i Edge 140.

Wciąż istnieją otwarte problemy dotyczące specyfikacji i składni CSS masonry, dlatego Twoja opinia jest dla nas kluczowa, abyśmy mogli ustalić ostateczny kształt interfejsu API. Wypróbuj tę funkcję i przekaż nam swoją opinię.

Testowanie układu kaskadowego CSS w Chromium

Aby przetestować CSS Masonry:

1. Używaj Chrome lub Edge w wersji 140 lub nowszej (albo innej przeglądarki opartej na Chromium w odpowiedniej wersji).
2. Otwórz about:flags w nowej karcie.
3. Wyszukaj „CSS Masonry Layout”.
4. Włącz flagę.
5. Uruchom ponownie przeglądarkę.

Po włączeniu tej funkcji możesz zobaczyć ją w działaniu, sprawdzając wersje demonstracyjne przeglądarki Microsoft Edge (wyświetl kod źródłowy wersji demonstracyjnych) lub czytając dalej, aby dowiedzieć się więcej o tej funkcji i dostępnej składni.

Co to jest murarstwo?

Układ kaskadowy CSS to tryb układu, który umożliwia tworzenie układu elementów przypominającego mur z cegieł w sposób, który nie jest łatwo osiągalny w przypadku siatki CSS, Flexboxa ani układu wielokolumnowego.

Układ kaskadowy CSS umożliwia rozmieszczanie elementów w kolumnach lub wierszach, przy czym elementy są umieszczane w tych kolumnach lub wierszach w sposób zwinięty.

Układ kaskadowy można porównać do autostrady, na której jedynym ograniczeniem jest liczba i rozmiar pasów ruchu. W ramach pasów pojazdy mogą mieć dowolną długość i zawsze starają się być jak najbliżej celu, czyli początku układu murarskiego.

Elementy układu są ograniczone tylko w jednym kierunku i mogą swobodnie rozciągać się w drugim, niezależnie od innych elementów znajdujących się w pobliżu. Układ masonry różni się od układu grid tym, że jego ścieżki są zdefiniowane tylko w jednym kierunku.

W przypadku układu kaskadowego wizualna kolejność elementów jest mniej ważna niż ostateczny wygląd. Układ kaskadowy pozwala w pełni wykorzystać dostępną przestrzeń niezależnie od tego, jakie elementy chcesz wyświetlić. Dlatego jest to świetny wybór w przypadku stron, które zawierają dużo elementów wizualnych, a kolejność wyświetlania treści nie ma tak dużego znaczenia jak efekt końcowy.

Ciekawym aspektem układu kaskadowego jest to, że podobnie jak w przypadku siatki, elementy mogą obejmować wiele ścieżek. W takim przypadku elementy są nadal umieszczane w taki sposób, aby wypełnić jak największą część dostępnej przestrzeni.

To automatyczne umieszczanie może prowadzić do bardzo interesujących wyników, które projektanci stron internetowych starali się osiągnąć od dawna. Przykład znajdziesz w galerii zdjęć z Nowego Jorku, która pokazuje, jak można wyświetlać zdjęcia w kompaktowy sposób w wielu kolumnach, a jednocześnie pozwalać niektórym elementom (w tym przykładzie tytułowi) rozciągać się na kilka kolumn:

Oto kilka innych przykładów zastosowania układu kaskadowego.

Układ bloga, w którym wyświetlają się miniatury i opisy poszczególnych postów.

Witryna z wiadomościami, w której artykuły są wyświetlane w kolumnach, przy czym niektóre z nich są szersze od innych, a obrazy główne zajmują całą szerokość strony.

Kolekcja zdjęć o różnych rozmiarach kolumn, przy czym niektóre zdjęcia zajmują kilka kolumn.

Obejścia i ich ograniczenia

Wdrożenie tego wzorca projektowego w internecie wymaga obecnie użycia bibliotek JavaScriptu lub obejść wykorzystujących siatkę CSS, flexbox lub wielokolumnowość. Może to jednak mieć wady, takie jak:

• Gorsza wydajność: korzystanie z bibliotek JavaScript lub niestandardowego kodu w celu naśladowania układu kaskadowego CSS wiąże się z kompromisami w zakresie wydajności, co może negatywnie wpływać na wrażenia użytkowników.
• Większa złożoność kodu:
  • Zagwarantowanie prawidłowego rozmieszczenia elementów i rozłożenia przestrzeni w siatce CSS, flexboxie lub układzie wielokolumnowym w celu odtworzenia układu CSS masonry jest trudne do osiągnięcia.
  • Obsługa konkretnych funkcji, takich jak elementy obejmujące więcej niż 1 kolumnę lub wiersz, niestandardowe kolejności elementów lub dostosowywanie do obszaru wyświetlania, może również prowadzić do komplikacji i ograniczeń.
• Większe obciążenie związane z konserwacją: złożony niestandardowy kod CSS lub JavaScript jest trudniejszy w utrzymaniu.

Siatka CSS to świetny tryb układu, który jest bardzo elastyczny i pozwala tworzyć wiele różnych stylów układów, zarówno dla całej strony internetowej, jak i komponentu czy tylko do wyrównywania poszczególnych elementów. Nie ma jednak takich samych cech jak układ kaskadowy.

W siatce CSS wiersze i kolumny są ściśle zdefiniowane, a elementy mogą znajdować się tylko w komórkach siatki. Jeśli próbujesz umieścić elementy wzdłuż jednej z osi, ale nie są one dopasowane do odpowiednich komórek, musisz zdecydować, czy chcesz pozostawić między nimi odstępy, czy rozciągnąć je tak, aby wypełniły puste miejsce.

Podobnie jak w przypadku układu kaskadowego, flexbox uwzględnia tylko jeden kierunek i pozwala elementom decydować o przestrzeni, którą chcą zajmować w drugim kierunku. Oznacza to, że za pomocą flexboxa możesz uzyskać układ przypominający układ kaskadowy, o ile nie przeszkadza Ci, że elementy są rozmieszczane w kierunku bloku, po jednej kolumnie naraz. Kontener flex musi mieć też zdefiniowany rozmiar bloku lub wysokość, aby elementy zawijały się w nowym wierszu flex, tworząc w ten sposób nową kolumnę.

Wielokolumnowy układ może też tworzyć układ przypominający mur, ponownie rozmieszczając elementy w kolumnach. Poza tym w przypadku wielu kolumn nie można zmieniać rozmiaru poszczególnych kolumn. Wszystkie mają ten sam rozmiar, podczas gdy układ kaskadowy zapewnia dużą elastyczność w określaniu ścieżek, w których są umieszczane elementy.

Nie chodzi o to, że siatka, flexbox czy układ wielokolumnowy są gorsze od układu kaskadowego. To świetne typy układów, które mają wiele zastosowań. Chodzi o to, że jeśli chcesz uzyskać układ kaskadowy, to właśnie CSS masonry Ci to umożliwi.

Stan CSS masonry

Grupa robocza CSS opracowuje układ kaskadowy w specyfikacji CSS Grid Level 3. Specyfikacja jest w trakcie opracowywania i tymczasowo zawiera 2 różne proponowane składnie. Pierwszy z nich używa nowego słowa kluczowego dla właściwości display, a w drugim układ kaskadowy jest bezpośrednio zintegrowany z układem siatki CSS.

Używaj klawisza display: masonry

Ta składnia wprowadza CSS masonry jako własny typ display. Więcej szczegółów na temat tego podejścia i jego motywacji znajdziesz w poście na blogu zespołu Google Chrome Feedback needed: How should we define CSS masonry? (Potrzebujemy opinii: jak powinniśmy zdefiniować CSS masonry?) oraz w pozostałej części tego posta. Obecny prototyp w Chromium jest oparty na tej propozycji.

display: grid; grid-template-*: masonry;

W tej składni układ kaskadowy CSS jest bezpośrednio zintegrowany z siatką CSS. Tryb muru jest aktywowany przez zastosowanie słowa kluczowego masonry do definicji grid-template-columns w przypadku układu muru opartego na wierszach lub do definicji grid-template-rows w przypadku układu muru opartego na kolumnach.

Więcej informacji o tej propozycji i jej uzasadnieniu znajdziesz w poście na blogu WebKit Pomóż nam wybrać ostateczną składnię dla układu kaskadowego w CSS.

Pamiętaj, że alternatywą dla tej propozycji jest item-packwłaściwość i słowo kluczowe collapse, które uruchamiają układ kaskadowy CSS zamiast jednej z dwóch właściwości szablonu siatki.

Od czasu opublikowania postów przez zespoły Chrome i WebKit grupa CSSWG kontynuowała dyskusje na temat ogólnej składni, aby posunąć prace do przodu. Twoja opinia może pomóc w dalszym rozwoju tych forów.

Więcej informacji o bieżącym stanie dyskusji znajdziesz w tym artykule, w którym opisano aktualny zestaw tematów dyskusji dotyczących składni układu kaskadowego, oraz w tym artykule, w którym znajdziesz podsumowanie dotychczasowej debaty na temat składni.

Tworzenie własnego układu CSS typu masonry

Zróbmy coś ciekawego i utwórzmy układ murarski CSS.

Składnia CSS masonry jest nadal przedmiotem dyskusji, ale naszą implementację tej funkcji można już dziś przetestować w Chromium, włączając flagę CSS Masonry Layout zgodnie z instrukcjami w artykule Testowanie CSS Masonry. Poniższe przykłady pokazują, co jest dostępne w wersji próbnej dla deweloperów.

Tworzenie kontenera murarskiego

Aby utworzyć pierwszy kontener murarski oparty na kolumnach, użyj elementu display:masonry i zdefiniuj rozmiary kolumn za pomocą elementu grid-template-columns. Wartość domyślna parametru masonry-direction to column, więc ustawienie tej właściwości jest opcjonalne.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

W przypadku kontenera typu masonry opartego na wierszach użyj display:masonry, zdefiniuj rozmiary wierszy za pomocą grid-template-rows, a następnie ustaw masonry-direction:row.

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

Jak zapewne zauważyłeś(-aś), ta składnia nieco odbiega od pierwotnej propozycji Google. Niezależnie od wyzwalacza użytego w przypadku CSS Masonry grupa robocza CSS postanowiła ponownie wykorzystać właściwości rozmiaru i umiejscowienia szablonu siatki w układzie CSS Masonry.

Chociaż umożliwia to większe ponowne wykorzystanie właściwości między typami układu, może być mylące. Chętnie poznamy Twoją opinię na ten temat. Możemy rozważyć utworzenie bardziej ogólnych aliasów dla właściwości takich jak grid-template-columns i grid-template-rows, np. template-columns lub template-rows, które można by stosować zarówno w przypadku siatki, jak i układu kaskadowego.

Używanie domyślnego rozmiaru ścieżki

Nowy typ wyświetlania to okazja do ponownego przemyślenia domyślnych ustawień usługi.

W siatce wartości grid-template-columns i grid-template-rows domyślnie przyjmują wartość none, która zgodnie z obecną definicją zwykle daje jedną kolumnę lub jeden wiersz. W przypadku układu kaskadowego to ustawienie domyślne zwykle powoduje niepożądany układ.

Implementacja w Chromium dodaje nową proponowaną definicję elementu none, która zastąpi domyślny rozmiar ścieżki w układzie kaskadowym CSS. Nowy domyślny rozmiar ścieżki to wartość repeat(auto-fill, auto). Ta wartość tworzy ładny układ kaskadowy bez konieczności definiowania rozmiarów ścieżek:

.masonry {
  display: masonry;
  gap: 10px;
}

Jak widać na ilustracji, kontener murarski tworzy tyle kolumn o automatycznym rozmiarze, ile zmieści się w dostępnej przestrzeni.

W przypadku siatki CSS wszystkie elementy są umieszczane przed określeniem rozmiaru ścieżek, co oznacza, że ta definicja automatycznego określania rozmiaru ścieżki nie jest możliwa. W przypadku układu CSS masonry to ograniczenie nie obowiązuje, ponieważ umieszczanie i rozmiar są ze sobą powiązane i uproszczone. Po zniesieniu tego ograniczenia możemy podać bardziej przydatny domyślny rozmiar ścieżki w przypadku układów kaskadowych.

Wypróbuj skróconą właściwość masonry

Jak wspomnieliśmy wcześniej, obecna implementacja w Chromium opiera się na właściwościach grid-template-*, które definiują ścieżkę układu kaskadowego. Jednak ponieważ układ masonry ma tylko jeden wymiar, zaimplementowaliśmy też właściwość skróconą masonry, której możesz użyć do zdefiniowania zarówno kierunku układu masonry, jak i definicji ścieżki za jednym razem, bez mylącej właściwości z prefiksem grid-.

Na przykład te 2 fragmenty kodu utworzą równoważne kontenery CSS masonry.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

Skrót masonry jest nadal przedmiotem dyskusji w grupie roboczej ds. CSS. Wypróbuj tę funkcję już dziś i przekaż nam swoją opinię.

Używanie niestandardowych rozmiarów ścieżek

Jeśli chodzi o określanie rozmiarów ścieżek, układ kaskadowy jest tak samo elastyczny jak siatka, ponieważ pozwala precyzyjnie dostosowywać liczbę i rozmiary ścieżek układu. Ścieżki w układzie kaskadowym nie muszą mieć tego samego rozmiaru, np.:

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

W tym przykładzie definiujemy 2 ścieżki o szerokości 3 rem, a następnie zmienną liczbę ścieżek o szerokości 5 rem i jedną ścieżkę o szerokości 12 rem.

Obejmuje wiele ścieżek

W układzie kaskadowym elementy nie muszą być ograniczone do ścieżek, w których się znajdują, ponieważ w razie potrzeby mogą obejmować wiele ścieżek. Może to być bardzo przydatne, gdy niektóre elementy są ważniejsze od innych i wymagają więcej miejsca.

Na przykład:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

Możesz też użyć tej funkcji, aby rozciągnąć elementy na kilka ścieżek i sprawić, że będą zajmować całą długość kontenera:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

W demonstracyjnej witrynie z wiadomościami służy to do wyświetlania reklamy subskrypcji w artykułach.

Dostrajanie umieszczania elementów murowanych

W układzie Masonry CSS elementy są umieszczane w kolumnie lub wierszu o najkrótszej pozycji bieżącej.

Wyobraź sobie kontener w układzie kaskadowym z 2 kolumnami. Jeśli w pierwszej kolumnie kontenera znajduje się element o wysokości 110 pikseli, a w drugiej – element o wysokości 100 pikseli, trzeci element zostanie umieszczony w drugiej kolumnie, gdzie będzie o 10 pikseli bliżej początku kierunku układu kaskadowego.

Jeśli uważasz, że różnica 10 pikseli w pozycji wyświetlania jest w Twoim przypadku wystarczająco mała, a wolisz, aby trzeci element był umieszczony w pierwszej kolumnie, aby lepiej pasował do kolejności źródłowej, użyj właściwości item-tolerance.

Nowa właściwość item-tolerance kontroluje czułość umieszczania elementów.

W poprzednim przykładzie możesz zastosować item-tolerance: 10px; do kontenera, aby dostosować zmienność umieszczania elementów:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

Zwróć uwagę, że projekt specyfikacji nazywa tę właściwość item-slack. Grupa robocza CSS podjęła niedawno decyzję o używaniu nazwy item-tolerance. Specyfikacja zostanie wkrótce zaktualizowana.

Inne dostępne właściwości

Możesz używać tych samych właściwości rozmiaru i umiejscowienia szablonu, aby określać rozmiar i umiejscowienie elementów na osi siatki kontenera muru, co w przypadku siatki CSS, np. grid-row, grid-column, grid-area, grid-template-areas lub order. Podczas tworzenia układu muru możesz w pełni wykorzystać możliwości siatki CSS.

Prośba o opinię

Nie możemy się doczekać, aż poznasz układ kaskadowy CSS, wykażesz się kreatywnością i odkryjesz nowe możliwości, które Ci on zapewni. Aby zacząć, sprawdź nasze dema i ich kod źródłowy oraz zacznij tworzyć własne przykłady w Chromium (pamiętaj, aby najpierw włączyć flagę).

Twoja opinia jest dla nas ważna, ponieważ pomaga nam kształtować interfejs API i sprawdzać, czy jest on dostosowany do Twoich potrzeb w internecie. Wypróbuj układ kaskadowy i daj nam znać, co o nim sądzisz.

Jeśli masz jakieś przemyślenia lub uwagi dotyczące kształtu interfejsu API, daj nam znać, komentując problem 11243. Jeśli wolisz napisać post na własnym blogu lub w mediach społecznościowych, poinformuj nas o tym na X lub LinkedIn.

Układ kaskadowy CSS jest nadal wdrażany w Chromium. Jeśli zdecydujesz się ją przetestować, pamiętaj, że nadal nad nią pracujemy i może się zdarzyć, że nie będzie działać zgodnie z oczekiwaniami. Obecnie występują pewne ograniczenia, m.in. dotyczące gęstego upakowania, umieszczania w odwrotnej kolejności, obsługi podsiatki, obsługi poza przepływem, obsługi linii bazowej, obsługi Narzędzi deweloperskich, obsługi fragmentacji i obsługi dekoracji przerw.

Jeśli podczas testowania funkcji znajdziesz błąd, podziel się swoją opinią, otwierając nowy błąd Chromium.