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

Patrick Brosset

Alison Maher

Data publikacji: 23 lipca 2025 r., ostatnia aktualizacja: 13 lutego 2026 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.

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

Przetestuj CSS Masonry w Chromium już dziś

Aby przetestować CSS Masonry:

1. Używaj przeglądarki 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ć, jak działa, zapoznając się z demonstracjami Microsoft Edge (wyświetl kod źródłowy demonstracji) lub czytając dalej, aby dowiedzieć się więcej o tej funkcji i dostępnej składni.

Czym jest murarstwo?

Układ murowany CSS to tryb układu, który pozwala tworzyć układ elementów przypominający cegły w sposób, który nie jest łatwy do osiągnięcia za pomocą siatki CSS, flexboxa lub układu wielokolumnowego.

Układu CSS masonry można używać do rozmieszczania elementów w formacie kolumn lub wierszy, w których elementy są umieszczane w sposób zwinięty.

Można go porównać do autostrady, gdzie jedynym ograniczeniem jest liczba i rozmiar pasów ruchu. W obrębie 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 rozszerzać się w drugim, niezależnie od innych elementów, które znajdują się w pobliżu. Układ masonry różni się od siatki tym, że jego ścieżki są zdefiniowane tylko w jednym kierunku.

W przypadku układu kafelkowego wizualna kolejność elementów jest mniej ważna niż ostateczny projekt. Układ kafelkowy pozwala maksymalnie wykorzystać dostępne miejsce, niezależnie od tego, jakie elementy masz na stronie. Dzięki temu jest to świetny wybór w przypadku stron, które są bogate wizualnie i na których wizualna kolejność treści nie ma tak dużego znaczenia jak efekt końcowy.

Ciekawym aspektem układu masonry jest to, że umożliwia on również rozciąganie elementów na wiele ścieżek, podobnie jak w przypadku siatki. W takich przypadkach elementy są nadal umieszczane w taki sposób, aby wypełnić jak najwięcej dostępnego miejsca.

To automatyczne rozmieszczanie może prowadzić do bardzo interesujących wyników, które projektanci stron internetowych od dawna próbowali osiągnąć. Przykładem może być galeria zdjęć Nowego Jorku, która pokazuje, jak można wyświetlać zdjęcia w kompaktowy sposób w kilku kolumnach, jednocześnie umożliwiając rozciągnięcie niektórych elementów (w tym przykładzie tytułu) na kilka kolumn:

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

Układ bloga, który pokazuje miniaturę i opis każdego posta.

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

Kolekcja zdjęć z kolumnami o różnych rozmiarach i niektórymi zdjęciami obejmującymi wiele kolumn.

Obejścia i ich ograniczenia

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

• Niższa wydajność: poleganie na bibliotekach JavaScriptu lub niestandardowym kodzie w celu naśladowania układu kafelkowego CSS wiąże się z kompromisami w zakresie wydajności, co może prowadzić do negatywnych wrażeń użytkowników.
• Większa złożoność kodu:
  • Zapewnienie prawidłowego rozmieszczenia elementów i przestrzeni w siatce CSS, flexboxie lub układzie wielokolumnowym w celu naśladowania układu kafelkowego CSS jest trudne do osiągnięcia.
  • Obsługa określonych funkcji, takich jak elementy, które obejmują więcej niż 1 kolumnę lub wiersz, niestandardowe porządkowanie elementów lub dostosowywanie do widocznego obszaru, może również prowadzić do złożoności 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 niesamowity 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, lub po prostu wyrównywać poszczególne elementy. Nie ma jednak takich samych właściwości jak mur.

W siatce CSS wiersze i kolumny są sztywno zdefiniowane, a elementy mogą istnieć tylko w komórkach siatki. Jeśli próbujesz upakować elementy wzdłuż jednej z osi, ale elementy nie są dopasowane do odpowiednich komórek, musisz wybrać, czy chcesz pozostawić odstępy między elementami, czy rozciągnąć je, aby wypełnić puste miejsce.

Podobnie jak w przypadku układu kafelkowego, 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, który wygląda jak układ murarski, o ile chcesz, aby elementy były układane w kierunku bloku, po jednej kolumnie naraz. Kontener flex będzie też potrzebować zdefiniowanego rozmiaru bloku lub wysokości, aby elementy zawijały się do nowego wiersza flex, tworząc nową kolumnę.

Układ wielokolumnowy może też utworzyć układ przypominający mur, ponownie układając elementy w kolumnach. Ponadto układ wielokolumnowy nie pozwala na ustawienie różnych rozmiarów kolumn. Wszystkie mają ten sam rozmiar, podczas gdy układ masonry zapewnia dużą elastyczność, jeśli chodzi o definiowanie ś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 kafelkowy, CSS masonry jest tym, co Ci to umożliwi.

Stan układu masonry w CSS

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

Otwórz display: masonry

Ta składnia wprowadza układ masonry CSS jako własny typ display. Więcej informacji o tym podejściu 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ć układ masonry w CSS?) 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 masonry CSS jest bezpośrednio zintegrowany z siatką CSS. Tryb murarski jest aktywowany przez zastosowanie słowa kluczowego masonry do definicji grid-template-columns w przypadku układu murarskiego opartego na wierszach lub do definicji grid-template-rows w przypadku układu murarskiego opartego na kolumnach.

Więcej informacji o tej propozycji i jej motywacji znajdziesz w poście WebKit Pomóż nam wybrać ostateczną składnię dla Masonry w CSS.

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

Od czasu opublikowania postów przez zespoły Chrome i WebKit grupa robocza CSSWG kontynuuje dyskusje na temat ogólnej składni, którą należy zastosować. Twoja opinia może pomóc w dalszym rozwoju tych forów.

Więcej informacji o bieżącym stanie dyskusji znajdziesz w problemie 11593, który zawiera podsumowanie aktualnych tematów dyskusji na temat składni masonry, oraz w problemie 11243, który zawiera podsumowanie dotychczasowej debaty na temat składni.

Tworzenie własnego układu murowanego CSS

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

Chociaż składnia CSS Masonry jest nadal przedmiotem dyskusji, naszą implementację tej funkcji można już dziś przetestować w Chromium, włączając flagę CSS Masonry Layout, jak opisano w artykule Test CSS Masonry today. Poniższe przykłady pokazują, co jest dostępne w wersji próbnej dla deweloperów.

Tworzenie kontenera murowanego

Aby utworzyć pierwszy kontener kaskadowy oparty na kolumnach, użyj display:masonry i zdefiniuj rozmiary kolumn za pomocą grid-template-columns. Wartość domyślna właściwości 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 kafelkowego 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 widzisz, ta składnia nieco się różni od pierwotnej propozycji Google. Niezależnie od aktywatora używanego w przypadku układu kaskadowego CSS grupa robocza CSS postanowiła ponownie wykorzystać właściwości rozmiaru i umieszczania szablonu siatki w układzie kaskadowym CSS.

Chociaż pozwala to na większe wykorzystanie właściwości między typami układów, może to 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 mogłyby być używane zarówno w przypadku siatki, jak i układu kafelkowego.

Użyj domyślnego rozmiaru ścieżki

Nowy typ wyświetlania daje możliwość ponownego przemyślenia domyślnych ustawień właściwości.

W siatce domyślne wartości grid-template-columns i grid-template-rows to none, co przy obecnej definicji zwykle skutkuje pojedynczą kolumną lub pojedynczym wierszem. W przypadku układu kafelkowego ta wartość domyślna najczęściej powoduje niepożądany układ.

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

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

Jak widać na obrazie, kontener murowany tworzy tyle kolumn o automatycznym rozmiarze, ile zmieści się w dostępnym miejscu.

W przypadku siatki CSS wszystkie elementy są umieszczane przed określeniem rozmiaru ścieżek, co oznacza, że nie można użyć tej definicji automatycznego określania rozmiaru ścieżki. Jednak w przypadku CSS masonry to ograniczenie już nie obowiązuje, ponieważ rozmieszczenie i rozmiar są ze sobą powiązane i uproszczone. Dzięki zniesieniu tego ograniczenia możemy zapewnić bardziej przydatny domyślny rozmiar ścieżki w układach murarskich.

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

Jak wspomnieliśmy wcześniej, obecna implementacja w Chromium opiera się na właściwościach grid-template-*, które definiują ścieżkę murarską w układzie. Ponieważ jednak układ kaskadowy ma tylko jeden wymiar, wprowadziliśmy też skróconą właściwość masonry, której można użyć do zdefiniowania zarówno kierunku układu kaskadowego, jak i definicji ścieżki, 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 CSS. Wypróbuj tę funkcję już dziś i daj nam znać, co o niej myślisz.

Używanie niestandardowych rozmiarów ścieżek

Jeśli chodzi o definiowanie rozmiarów ścieżek, układ murarski jest tak samo elastyczny jak siatka, ponieważ umożliwia precyzyjne dostosowanie liczby i rozmiarów ścieżek układu. Ścieżki murarskie nie muszą mieć tego samego rozmiaru, na przykład:

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

W tym przykładzie definiujemy 2 pierwsze ścieżki o szerokości 3 rem, po których następuje zmienna liczba ścieżek o szerokości 5 rem, a następnie pojedyncza ścieżka o szerokości 12 rem.

obejmować wiele ścieżek,

W układzie murarskim elementy nie muszą być ograniczone do ścieżek, w których są umieszczone, 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 wiele ścieżek i sprawić, że będą miały długość całego kontenera:

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

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

To jest to, czego używa wersja demonstracyjna witryny z wiadomościami, aby wyświetlać reklamę subskrypcji w artykułach.

Dostrajanie rozmieszczenia elementów w układzie kafelkowym

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

Wyobraź sobie kontener z 2 kolumnami. Jeśli kontener ma element o wysokości 110 pikseli w pierwszej kolumnie i element o wysokości 100 pikseli w drugiej kolumnie, trzeci element zostanie umieszczony w drugiej kolumnie, gdzie będzie o 10 pikseli bliżej początku kierunku układu kafelkowego.

Jeśli różnica 10 pikseli w pozycji wyświetlania jest w Twoim przypadku wystarczająco mała i wolisz, aby trzeci element został 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ść rozmieszczania elementów.

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

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

Zwróć uwagę, że w wersji roboczej specyfikacji ta właściwość jest nazywana item-slack. Grupa robocza CSS podjęła niedawno decyzję o używaniu nazwy item-tolerance, a specyfikacja zostanie wkrótce zaktualizowana.

Inne dostępne właściwości

Możesz używać tych samych właściwości rozmiaru i umieszczania szablonu, aby określać rozmiar i umieszczać elementy na osi siatki kontenera murarskiego, tak jak w przypadku siatki CSS, np. grid-row, grid-column, grid-area, grid-template-areas lub order. Wykorzystaj pełne możliwości siatki CSS podczas tworzenia układu kafelkowego.

Prośba o opinię

Z niecierpliwością czekamy, aż zaczniesz korzystać z układu masonry w CSS, wykażesz się kreatywnością i odkryjesz nowe możliwości, które możesz dzięki niemu odblokować. Dobrym sposobem na rozpoczęcie jest zapoznanie się z naszymi wersjami demonstracyjnymi i ich kodem źródłowym oraz rozpoczęcie tworzenia własnych przykładów w Chromium (pamiętaj, aby najpierw włączyć flagę).

Twoja opinia jest dla nas ważna, ponieważ pomaga nam ulepszać interfejs API i sprawdzać, czy jest on zaprojektowany tak, aby spełniał Twoje potrzeby w internecie. Wypróbuj układ kafelkowy i daj nam znać, co o nim myślisz.

Jeśli masz przemyślenia lub opinie na temat kształtu interfejsu API, daj nam znać, komentując problem 11243. Jeśli wolisz napisać posta na własnym blogu lub w mediach społecznościowych, poinformuj nas o tym na platformie 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żesz napotkać przypadki, w których nie będzie działać zgodnie z oczekiwaniami. Niektóre z obecnych ograniczeń to m.in. gęste pakowanie, odwrócone rozmieszczanie, obsługa podsiatki, obsługa elementów poza przepływem, obsługa linii bazowej, obsługa Narzędzi deweloperskich, obsługa fragmentacji i obsługa dekoracji odstępów.

Jeśli podczas testowania funkcji znajdziesz błąd, prześlij opinię, otwierając nowy błąd Chromium.