Opublikowano: 19 września 2024 r.
Grupa robocza CSS połączyła 2 propozycje dotyczące prezentacji typu masonry w CSS w jedną specyfikację. Mamy nadzieję, że ułatwi to porównanie obu opcji i podjęcie ostatecznej decyzji. Zespół Chrome nadal uważa, że najlepszym rozwiązaniem byłaby osobna składnia masonry. Największy problem z wydajnością wymieniony w poprzednim wpisie został rozwiązany, ale nadal istnieją wątpliwości dotyczące składni, wartości początkowych i tego, jak łatwo będzie nauczyć się wersji z siatką.
Aby jednak sprawdzić nasze założenia, przeanalizowaliśmy kilka przykładów, aby pokazać, jak układanie z wypełnieniem tła sprawdza się w przypadku każdej wersji. 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 jest jasne, że oddzielenie układu typu „kamień polny” od układu kratowego nie spowoduje utraty funkcjonalności. W rzeczywistości może być wręcz odwrotnie. Jak zobaczysz w tym poście, wersja display: masonry oferuje nowe możliwości i prostszą składnię.
Ponadto wielu deweloperów wyraziło obawy, że ponowne sortowanie elementów w układaniu typu masonry może powodować problemy z dostępnością. Rozwiązanie tego problemu jest też proponowane w przypadku obu wersji składni za pomocą proponowanej właściwości reading-flow.
Podstawowy układ typu „kamień polny”
To układ, który większość osób wyobraża sobie, gdy myśli o murowaniu. Elementy wyświetlają się w wierszach, a po umieszczeniu pierwszego wiersza kolejne elementy przesuwają się w miejsce poprzedzające je krótsze elementy.
Z: display: masonry
Aby utworzyć układ typu „kamień polny”, użyj wartości masonry dla właściwości display. Spowoduje to utworzenie układu typu mozaiki z ścieżkami kolumn zdefiniowanymi przez Ciebie (lub zdefiniowanymi przez zawartość) i typu mozaiki na drugiej osi. Pierwszy element jest wyświetlany na początku bloku i w ramach (w tym przypadku w lewym górnym rogu), a kolejne elementy są wyświetlane w ramach.
Aby zdefiniować utwory, użyj elementu masonry-template-tracks z wartościami listy utworów, które są używane w układzie siatki CSS.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Z: display: grid
Aby utworzyć układ typu „kamień polny”, najpierw utwórz układ siatki, używając wartości grid w przypadku właściwości display. Zdefiniuj kolumny za pomocą właściwości grid-template-columns, a następnie nadaj wartości grid-template-rows masonry.
Spowoduje to utworzenie układu podobnego do tego, który uzyskujemy w przypadku automatycznie umieszczanych elementów siatki, ale elementy w każdej kolumnie będą używać układu typu „kamień” i będą się przestawiać, aby wypełnić przestrzeń pozostawioną przez mniejsze elementy w poprzedniej kolumnie.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Informacje, które należy wziąć pod uwagę, aby wybrać jedną z 2 opcji
Różnica między tymi metodami polega na tym, że w przypadku wersji display: masonry układ jest typu „kamień polny” nawet wtedy, gdy nie podasz żadnych ścieżek za pomocą parametru masonry-template-tracks. Dlatego display: masonry może być wszystkim, czego potrzebujesz.
Dzieje się tak, ponieważ początkowa wartość parametru masonry-template-tracks to repeat(auto-areas, auto). Układ tworzy tyle ścieżek o automatycznym rozmiarze, ile mieści się w kontenerze.
Odwrócony przepływ z użyciem cegieł
Specyfikacja zawiera sposoby zmiany kierunku przepływu obrazu. Możesz na przykład zmienić kolejność wyświetlania bloków.
Z: display: masonry
Utwórz układ typu „kamień polny” za pomocą elementu display: masonry, a potem użyj elementu 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 typu mozaiki za pomocą elementów display: grid i grid-template-rows: masonry.
Następnie użyj właściwości grid-auto-flow z wartością row-reverse, aby spowodować, że elementy będą się układać od końca bloku kontenera siatki.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Informacje, które należy wziąć pod uwagę, aby wybrać jedną z 2 opcji
Wersja display: masonry działa bardzo podobnie do flexboxa. Zmień kierunek przepływu kolumn, używając właściwości masonry-direction z wartością column-reverse.
Wersja siatki CSS używa grid-auto-flow. W obecnej postaci grid-auto-flow: row-reverse i grid-auto-flow: column-reverse będą miały taki sam efekt. Może to być mylące, ponieważ możesz oczekiwać czegoś innego.
Układ typu masonry dla wierszy
Możesz też zmienić kierunek, aby zdefiniować wiersze.
Z: display: masonry
Utwórz układ typu „muzyka kamieniarska” za pomocą elementu display: masonry, a następnie ustaw wartość elementu 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ślnie jest to auto, a więc ścieżki będą dopasowywać się do zawartości.
.masonry {
display: masonry;
masonry-direction: row;
}
Z: display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Informacje, które należy wziąć pod uwagę, aby wybrać jedną z 2 opcji
Podobnie jak w przypadku odwróconego przepływu, 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. Jeśli używasz skrótu, zmień kolejność składni.
W obu tych przykładach przełączania się między strumieniami wersja display: masonry wydaje się bardziej intuicyjna. Istnieje tylko 1 właściwość sterująca przepływem danych masonry-direction, która może przyjmować jedną z tych wartości:
rowcolumnrow-reversecolumn-reverse
Następnie dodaj informacje o rozmiarach potrzebne do elementu masonry-template-tracks, jeśli domyślna wartość automatyczna nie jest odpowiednia.
Aby uzyskać odwrotną kolejność w przypadku siatki, musisz użyć właściwości grid-auto-flow, a aby uzyskać układ typu rzędy, zmień wartość właściwości grid-template-*. W bieżącym składniku siatki nie można też pozostawić nie zdefiniowanej wartości osi siatki. Na osi, która nie ma wartości masonry, zawsze musisz podać właściwości grid-template-*.
Umieszczanie elementów
W obu wersjach możesz wyraźnie umieszczać elementy za pomocą ustawienia wiersza, które znasz z układów siatki. W obu wersjach możesz umieszczać elementy tylko na osi siatki, czyli osi z wstępnie zdefiniowanymi ścieżkami. Nie możesz umieszczać elementów na osi, która obsługuje układ typu „masonry”.
Z: display: masonry
Ten kod CSS definiuje układ typu muru z 4 kolumnami. Osie siatki to więc kolumny. Element z klasą a jest umieszczany od pierwszego wiersza kolumny do trzeciego wiersza kolumny, obejmując 2 ścieżki z nowymi właściwościami masonry-track-*. Może to być też skrót od 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
Ten kod CSS definiuje układ typu muru z 4 kolumnami. Osie siatki to więc kolumny. Element z klasą a jest umieszczony od pierwszej linii kolumny do trzeciej linii kolumny, obejmując 2 ścieżki z usługami grid-column-*. Może to być również skrót od grid-column: 1 / 3;.
Jeśli oś siatki to kolumny, właściwości grid-row-* zostaną zignorowane, a jeśli oś siatki to 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 tych przypadkach możesz używać wierszy nazwanych. Poniższe przykłady pokazują siatkę z 2 kolumnami o nazwie a.
Z: display: masonry
Nazwane linie są zdefiniowane w wartości listy utworów masonry-template-tracks. Element może zostać umieszczony 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 linie są zdefiniowane w wartości listy utworów grid-template-columns. Element jest umieszczany po pierwszym wierszu o nazwie a. Jeśli właściwość grid-row jest zdefiniowana, zostanie 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 tych przypadkach możesz też używać obszarów nazwanych. Poniższe przykłady pokazują siatkę z 3 ścieżkami o nazwach „a”, „b” i „c”.
Z: display: masonry
Ścieżki mają nazwy odpowiadające wartości masonry-template-areas. Ponieważ nie zdefiniowano żadnych rozmiarów ścieżki, wszystkie trzy mają domyślnie rozmiar auto. Element jest umieszczony na ścieżce „a”.
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Ta sama zasada dotyczy definiowania wierszy i kolumn. Jedyną różnicą jest właściwość masonry-direction.
Z: display: grid
W przypadku kolumn składnia jest zasadniczo identyczna. Podobnie, ponieważ nie zdefiniowano żadnych rozmiarów ścieżki, wszystkie trzy mają domyślnie rozmiar auto, ale musisz wyraźnie określić, że druga oś to masonry:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
W przypadku wierszy wartość musi być zapisana w inny sposób, ponieważ grid-template-areas definiuje obszar dwuwymiarowy, 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;
}
Informacje, które należy wziąć pod uwagę, aby wybrać jedną z 2 opcji
W przypadku każdego pozycjonowania składni display: masonry lepiej sprawdza się zamiana kierunku. Właściwość masonry-track-* działa w dowolnym kierunku, który jest osią siatki, więc aby zmienić kierunek, wystarczy zmienić wartość właściwości masonry-direction. W przypadku wersji siatki musisz mieć co najmniej redundantne usługi, aby umożliwić przełączanie. W poprzednich przykładach znajdziesz jednak inne sposoby, w jakie zmiana kierunku jest bardziej skomplikowana w wersji siatki.
Skróty
W tym poście używamy wersji rozszerzonych, aby ułatwić Ci zrozumienie, które właściwości są używane. Zarówno wersje display: masonry, jak i display: grid mogą być zdefiniowane za pomocą wersji skróconych.
Z: display: masonry
Skrót display: masonry używa słowa kluczowego masonry. Aby utworzyć podstawowy układ typu „muzyka”, użyj tego kodu CSS:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Aby utworzyć prosty układ typu licowanie:
.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 typu „kamień polny” za pomocą skrótu grid.
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Aby utworzyć prosty układ typu masonry 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, można umieścić w skrótach więcej właściwości bez nadmiernego komplikowania kodu.
Załóżmy na przykład, że tworzysz 3 kolumny o nazwach „a”, „b” i „c”, które są wypełniane od dołu do góry.
Z: display:masonry
W display: masonry wszystkie te 3 parametry można ustawić w sposób skrócony:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Rozmiary są automatycznie dopasowywane, więc nie musisz ich określać. Jeśli jednak chcesz użyć konkretnego rozmiaru, możesz go dodać. Na przykład:
masonry: column-reverse 50px 100px 200px "a b c";.
Każdy komponent możesz też dowolnie zmieniać w kolejności – nie musisz pamiętać konkretnej kolejności. Jeśli chcesz zamiast tego użyć wierszy, wystarczy zastąpić column-reverse wartością row lub row-reverse. Pozostała składnia pozostaje bez zmian.
Z: display: grid
W display: grid należy osobno skonfigurować te 3 elementy:
.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 typu masonry, wszystkie kolumny mają rozmiar auto, ale jeśli chcesz podać rozmiary jawne, możesz to zrobić w ten sposób:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Jeśli chcesz użyć opcji „Siatka”, aby ustawić rozmiary i nazwy obszarów:
.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, a w przypadku wierszy – inna. Na przykład zmiana na wiersze wygląda tak:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Aby je wszystkie skrócić:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Informacje do rozważenia przed wyborem jednej z 2 opcji
Skrót display: masonry będzie prawdopodobnie często używany, ponieważ jest stosunkowo prosty. W wielu przypadkach w przypadku układu typu „standardowa” mozaika wystarczy ustawić definicje ścieżek. Wszystkie inne wartości mogą przyjąć domyślne wartości.
Wersja display: grid używa dotychczasowej skrótowej notacji grid, która jest dość skomplikowana i według naszych obserwacji jest rzadziej używana przez programistów. Jak widać w poprzednich przykładach, nawet w przypadku prostych układów typu masonry należy z uwagą dobierać kolejność wartości.
Inne uwagi
W tym poście omawiamy niektóre typowe przypadki użycia, ale nie wiemy, co przyniesie przyszłość dla siatki i masonry. Głównym argumentem przemawiającym za użyciem osobnej składni display: masonry jest to, że pozwala ona na rozdzielenie tych dwóch elementów w przyszłości. W szczególności w przypadku wartości początkowych, takich jak masonry-template-tracks, może być przydatne zastosowanie w masonry czegoś innego niż siatka. Jeśli zdecydujemy się na wersję display: grid, nie będziemy mogli zmienić domyślnych ustawień siatki, co może ograniczyć możliwości działania w przyszłości.
W tych przykładach możesz zobaczyć miejsca, w których przeglądarka musi zignorować właściwości, które są prawidłowe w siatce, jeśli używasz układu typu masonry.
Na przykład grid-template-areas, gdzie większość wartości jest pomijana, ponieważ definiuje ona dwuwymiarowy układ siatki, a w przypadku układu obrazu wypełniającego definiujemy tylko jeden kierunek.
Prześlij opinię
Zapoznaj się z tymi przykładami oraz z projektem specyfikacji, w którym każda wersja jest przedstawiona obok siebie. Podziel się z nami swoją opinią, komentując problem 9041. Jeśli wolisz napisać post na swoim blogu lub w mediach społecznościowych, daj nam znać na X lub na LinkedIn.