Data publikacji: 19 września 2024 r., ostatnia aktualizacja: 13 lutego 2026 r.
Grupa robocza CSS połączyła 2 propozycje dotyczące układu kaskadowego CSS w jedną specyfikację w wersji roboczej. Grupa ma nadzieję, że dzięki temu łatwiej będzie porównać te 2 usługi i podjąć ostateczną decyzję. Zespół Chrome nadal uważa, że najlepszym rozwiązaniem byłaby oddzielna składnia układu kaskadowego. Największy problem z wydajnością, o którym pisaliśmy w poprzednim poście, został rozwiązany, ale nadal istnieją obawy dotyczące składni, wartości początkowych i tego, jak łatwo będzie się nauczyć wersji połączonej z siatką.
Aby jednak sprawdzić nasze założenia, przeanalizowaliśmy kilka przykładów, aby pokazać, jak układ kaskadowy działa w poszczególnych wersjach. Zapoznaj się z przykładami w tym poście i prześlij nam swoją opinię, abyśmy mogli podjąć decyzję i wprowadzić tę funkcję.
Ten post nie obejmuje wszystkich możliwych przypadków użycia, ale widać, że oddzielenie układu kaskadowego od siatki nie spowoduje, że funkcja będzie mniej użyteczna. W rzeczywistości może być wręcz przeciwnie. Jak zobaczysz w tym poście, wersja display: masonry stwarza nowe możliwości i upraszcza składnię.
Wielu deweloperów wyraża też obawy, że zmiana kolejności elementów w układzie kaskadowym może powodować problemy z dostępnością. W przypadku obu wersji składni rozwiązanie to jest też wdrażane za pomocą proponowanej właściwości reading-flow.
Podstawowy układ kaskadowy
Jest to układ, który większość osób wyobraża sobie, myśląc o układzie kaskadowym. Elementy są wyświetlane w wierszach. Po umieszczeniu pierwszego wiersza kolejne elementy są przenoszone do miejsca pozostawionego przez krótsze elementy.
Z: display: masonry
Aby utworzyć układ kaskadowy, użyj wartości masonry dla właściwości display. Tworzy to układ kaskadowy ze ścieżkami kolumn, które definiujesz (lub są one definiowane przez zawartość), oraz układ kaskadowy na drugiej osi. Pierwszy element jest wyświetlany na początku bloku i na początku wiersza (czyli w języku angielskim w lewym górnym rogu), a elementy są rozmieszczane w kierunku wiersza.
Aby zdefiniować ścieżki, użyj funkcji masonry-template-tracks z wartościami listy ścieżek używanymi w układzie siatki CSS.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Z: display: grid
Aby utworzyć układ kaskadowy, najpierw utwórz układ siatki, używając wartości grid dla właściwości display. Zdefiniuj kolumny za pomocą właściwości grid-template-columns, a następnie przypisz właściwości grid-template-rows wartość masonry.
Spowoduje to utworzenie układu z automatycznie umieszczonymi elementami siatki, jednak elementy w każdym wierszu będą używać układu murarskiego i zmieniać położenie, aby wypełnić miejsce pozostawione przez mniejsze elementy w poprzednim wierszu.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Punkty, które warto wziąć pod uwagę przy wyborze między tymi 2 opcjami
Istotna różnica między tymi metodami polega na tym, że w przypadku display: masonry
wersji otrzymujesz układ kaskadowy, nawet jeśli nie określisz żadnych ścieżek za pomocą
masonry-template-tracks. Dlatego display: masonry może być wszystkim, czego potrzebujesz.
Dzieje się tak, ponieważ wartość początkowa masonry-template-tracks to repeat(auto-areas, auto). Układ tworzy tyle ścieżek o automatycznym rozmiarze, ile zmieści się w kontenerze.
Przepływ zwrotny z elementami murowanymi
Specyfikacja zawiera sposoby zmiany kierunku przepływu układu kaskadowego. Możesz na przykład zmienić kierunek wyświetlania z góry na dół.
Z: display: masonry
Utwórz układ kaskadowy za pomocą display: masonry, a następnie użyj masonry-direction z wartością column-reverse.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
Z: display: grid
Utwórz układ kaskadowy za pomocą display: grid i grid-template-rows: masonry.
Następnie użyj właściwości grid-auto-flow z nową wartością row-reverse, aby spowodować rozmieszczenie elementów od końca bloku kontenera siatki.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Punkty, które warto wziąć pod uwagę przy wyborze między tymi 2 opcjami
Wersja display: masonry działa bardzo podobnie do flexboxa. Zmień kierunek przepływu kolumn za pomocą właściwości masonry-direction o wartości column-reverse.
Wersja siatki CSS używa grid-auto-flow. Obecnie zdefiniowane grid-auto-flow: row-reverse i grid-auto-flow: column-reverse dają ten sam efekt. Może to być mylące, ponieważ możesz oczekiwać, że zrobią coś innego.
Układ kaskadowy wierszy
Możesz też zmienić kierunek, aby zdefiniować wiersze.
Z: display: masonry
Utwórz układ kaskadowy z wartością display: masonry, a następnie ustaw wartość masonry-direction na row. Jeśli nie chcesz, aby wiersze miały określony rozmiar bloku, nie musisz określać rozmiaru ścieżki, ponieważ domyślną wartością jest auto. W związku z tym ścieżki będą dopasowywać się do zawartych w nich treści.
.masonry {
display: masonry;
masonry-direction: row;
}
Z: display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Punkty, które warto wziąć pod uwagę przy wyborze między tymi 2 opcjami
Podobnie jak w przypadku przepływu odwróconego zmiana wersji display: masonry z kolumn na wiersze oznacza zmianę wartości masonry-direction. W przypadku wersji siatki musisz zamienić wartości właściwości grid-template-columns i grid-template-rows. Możesz też zmienić kolejność składni, jeśli używasz skrótu.
W obu tych przykładach przepływu przełączania bardziej intuicyjna jest display: masonry wersja. Przepływ jest kontrolowany przez jedną właściwość masonry-direction, która przyjmuje jedną z tych wartości:
rowcolumnrow-reversecolumn-reverse
Następnie dodaj wszelkie informacje o rozmiarach potrzebne do masonry-template-tracks, zakładając, że domyślna wartość automatyczna nie jest tym, czego potrzebujesz.
W przypadku siatki, aby odwrócić kierunek, musisz użyć właściwości grid-auto-flow, a aby przełączyć układ rzędowy, zmień wartość właściwości grid-template-*. W obecnej składni siatki nie można też pozostawić niezdefiniowanej wartości osi siatki. Zawsze musisz określać właściwości grid-template-* na osi, która nie ma wartości masonry.
Pozycjonowanie elementów
W obu wersjach możesz wyraźnie pozycjonować elementy za pomocą umieszczania opartego na wierszach, które znasz z układu siatki. W obu wersjach możesz umieszczać elementy tylko na osi siatki, czyli na osi z predefiniowanymi ścieżkami. Nie możesz umieszczać elementów na osi, która jest używana do układu murarskiego.
Z: display: masonry
Poniższy kod CSS definiuje układ kaskadowy z 4 kolumnami. Oś siatki to zatem kolumny. Element z klasą a jest umieszczony od pierwszego wiersza kolumny do trzeciego wiersza kolumny, obejmując 2 ścieżki z nowymi właściwościami masonry-track-*. Można to też zdefiniować jako skrót masonry-track: 1 / 3;.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
Z: display: grid
Poniższy kod CSS definiuje układ kaskadowy z 4 kolumnami. Oś siatki to zatem kolumny. Element z klasą a jest umieszczony od pierwszej linii kolumny do trzeciej linii kolumny, obejmując 2 ścieżki z właściwościami grid-column-*. Można to też zdefiniować jako skrót grid-column: 1 / 3;.
Jeśli osią siatki są kolumny, właściwości grid-row-* zostaną zignorowane, a jeśli osią siatki są wiersze, właściwości grid-columns-* zostaną zignorowane.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
W obu składniach możesz używać nazwanych linii. W przykładach poniżej pokazano siatkę z 2 liniami kolumn o nazwie a.
Z: display: masonry
Nazwane wiersze są zdefiniowane w wartości listy utworów w elemencie masonry-template-tracks. Można go umieścić po dowolnym wierszu o nazwie a.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
Z: display: grid
Nazwane wiersze są zdefiniowane w wartości listy utworów w elemencie grid-template-columns. Element jest umieszczany po pierwszym wierszu o nazwie a. Jeśli zdefiniowana jest właściwość grid-row, zostanie ona zignorowana.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
W obu składniach możesz też używać nazwanych obszarów. Poniższe przykłady pokazują siatkę z 3 ścieżkami o nazwach „a”, „b” i „c”.
Z: display: masonry
Ścieżki są nazywane zgodnie z wartością masonry-template-areas. Ponieważ nie zdefiniowano rozmiarów ścieżek, wszystkie 3 mają domyślnie rozmiar auto. Element jest umieszczany na ścieżce „a”.
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Działa to tak samo w przypadku definiowania wierszy i kolumn. Jedyną różnicą jest właściwość masonry-direction.
Z: display: grid
W przypadku kolumn składnia jest w zasadzie identyczna. Podobnie, ponieważ nie zdefiniowano żadnych rozmiarów ścieżek, wszystkie trzy mają domyślnie rozmiar auto, ale nadal musisz wyraźnie określić, że druga oś jest siatką:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
W przypadku wierszy wartość musi być jednak zapisana inaczej, ponieważ grid-template-areas określa dwuwymiarowy obszar, a każdy wiersz jest zapisywany jako osobny ciąg znaków:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
Punkty, które warto wziąć pod uwagę przy wyborze między tymi 2 opcjami
W przypadku każdego pozycjonowania składnia display: masonry lepiej sprawdza się przy zmianie kierunku. Właściwość masonry-track-* działa w dowolnym kierunku osi siatki, więc aby zmienić kierunek, wystarczy zmienić wartość masonry-direction. W przypadku wersji siatki musisz mieć co najmniej redundantne usługi, aby umożliwić przełączanie. W poprzednich przykładach znajdziesz inne sposoby, w jakie zmiana kierunku jest bardziej skomplikowana w przypadku wersji siatki.
Skróty
W tym poście użyto długich nazw, aby wyraźniej pokazać, które właściwości są używane. Jednak zarówno wersje display: masonry, jak i display: grid można zdefiniować za pomocą skrótów.
Z: display: masonry
Skrót display: masonry używa słowa kluczowego masonry. Aby utworzyć podstawowy układ
masonry, użyj tego kodu CSS:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Aby utworzyć prosty układ kaskadowy oparty na wierszach:
.masonry {
display: masonry;
masonry: row;
}
Aby zdefiniować ścieżki i układ oparty na wierszach za pomocą skrótu:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
Z: display: grid
Aby utworzyć podstawowy układ kaskadowy za pomocą skrótu grid.
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Aby utworzyć prosty układ kaskadowy oparty na wierszach:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
W bardziej złożonych przykładach, ponieważ ogólna składnia display:masonry jest prostsza, w skrócie można umieścić więcej właściwości bez nadmiernego skomplikowania.
Wyobraź sobie na przykład, że tworzysz 3 kolumny o nazwach „a”, „b” i „c”, wypełnione od dołu.
Z: display:masonry
W display: masonry wszystkie 3 wartości można ustawić razem w skróconej formie:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Ponieważ są one automatycznie dopasowywane do rozmiaru, nie musisz określać rozmiarów, ale jeśli chcesz użyć określonego rozmiaru, możesz go dodać. Na przykład:
masonry: column-reverse 50px 100px 200px "a b c";.
Każdy komponent można też dowolnie zmieniać. Nie musisz pamiętać żadnej konkretnej kolejności. Jeśli chcesz zamiast tego użyć wierszy, wystarczy zamienić column-reverse na row lub row-reverse. Pozostała część składni pozostaje bez zmian.
Z: display: grid
W display: grid te 3 aspekty muszą być ustawione osobno:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Podobnie jak w przypadku przykładu z układem kaskadowym, wszystkie kolumny mają rozmiar auto, ale jeśli chcesz podać konkretne rozmiary, możesz to zrobić:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Możesz też użyć wartości „grid”, aby ustawić rozmiary i nazwy obszarów jednocześnie:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
W obu tych przykładach kolejność jest ściśle wymagana i różni się od kolejności wierszy. Na przykład zmiana na wiersze wygląda tak:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Możesz też zapisać je w skrócie:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Punkty, które warto wziąć pod uwagę przy wyborze między tymi 2 opcjami
Skrót display: masonry jest prawdopodobnie powszechnie używany, ponieważ jest stosunkowo prosty. W wielu przypadkach w przypadku „standardowego” układu kaskadowego wystarczy ustawić definicje ścieżek. Wszystkie inne wartości mogą przyjąć wartość domyślną.
Wersja display: grid korzysta z istniejącego skrótu grid, który jest dość złożony i z naszego doświadczenia wynika, że jest rzadziej używany przez programistów. Jak pokazują powyższe przykłady, nawet w przypadku prostych układów typu mur wymaga to starannego ustalenia kolejności wartości.
Inne uwagi
W tym poście przyjrzymy się niektórym typowym przypadkom użycia, ale nie wiemy, co przyszłość może przynieść w przypadku siatki lub układu kaskadowego. Ważnym argumentem za używaniem składni separate
display: masonry jest to, że w przyszłości może ona ulec zmianie. W przypadku wartości początkowych, takich jak masonry-template-tracks, może być przydatne zastosowanie w układzie kaskadowym innego rozwiązania niż w układzie siatki. Jeśli wybierzemy wersję display: grid, nie będziemy mogli zmienić domyślnych ustawień siatki, co może ograniczyć nasze możliwości w przyszłości.
W tych przykładach widać miejsca, w których przeglądarka musi zignorować właściwości, które są prawidłowe w przypadku siatki, jeśli używasz układu kaskadowego.
Na przykład grid-template-areas, gdzie większość wartości jest odrzucana, ponieważ definiuje dwuwymiarowy układ siatki, w układzie kaskadowym w pełni definiujemy tylko jeden kierunek.
Prześlij opinię
Zapoznaj się z tymi przykładami, a także z projektem specyfikacji, w którym każda wersja jest przedstawiona obok drugiej. Podziel się z nami swoją opinią, komentując problem 9041. Jeśli wolisz napisać posta na własnym blogu lub w mediach społecznościowych, daj nam znać na X lub LinkedIn.