Alternatywna propozycja zabudowy CSS

Rachel Andrew

Data publikacji: 30 kwietnia 2024 r., ostatnia aktualizacja: 13 lutego 2026 r.

Ostrzeżenie: nieaktualna składnia: przykłady kodu w tym poście są oparte na wczesnej wersji tego, co obecnie nazywa się „układem pasów siatki”. Najnowszą wersję składni znajdziesz w specyfikacji css-grid-3.

Zespół Chrome chce wdrożyć w internecie układy typu murarskiego. Uważamy jednak, że wdrożenie go w ramach specyfikacji CSS Grid, jak zaproponowano w ostatnim poście na blogu WebKit, byłoby błędem. Uważamy też, że w poście na blogu WebKit argumentowano przeciwko wersji układu kaskadowego, której nikt nie proponował.

W tym poście wyjaśniamy, dlaczego w zespole Chrome mamy obawy dotyczące wdrożenia układu kaskadowego w ramach specyfikacji układu siatki CSS, i wyjaśniamy, co dokładnie umożliwia alternatywna propozycja. W skrócie:

• Zespół Chrome bardzo chce odblokować układ kaskadowy, ponieważ wiemy, że jest to coś, czego oczekują deweloperzy.
• Dodanie układu kaskadowego do specyfikacji siatki jest problematyczne z innych powodów niż to, czy uważasz, że układ kaskadowy jest siatką.
• Zdefiniowanie układu kaskadowego poza specyfikacją siatki nie uniemożliwia stosowania wielu rozmiarów ścieżek w przypadku układu kaskadowego ani używania właściwości takich jak wyrównanie czy odstępy, ani żadnych innych funkcji używanych w układzie siatki.

Czy układ kaskadowy powinien być częścią siatki?

Zespół Chrome uważa, że układ kaskadowy powinien być osobną metodą układu, zdefiniowaną za pomocą display: masonry (lub innego słowa kluczowego, jeśli zostanie wybrana lepsza nazwa). W dalszej części tego posta znajdziesz przykłady, jak może to wyglądać w kodzie.

Istnieją 2 powody, dla których uważamy, że układ kaskadowy jest lepiej zdefiniowany poza układem siatki: potencjalne problemy z wydajnością układu oraz fakt, że zarówno układ kaskadowy, jak i siatka mają funkcje, które mają sens w jednej metodzie układu, ale nie w drugiej.

Uwaga: ten post ma na celu zwrócenie uwagi na główne problemy, a nie podanie pełnego i szczegółowego wyjaśnienia każdego z nich. Aby uzyskać więcej informacji, otwórz połączone problemy.

Wyniki

Siatka i układ kaskadowy różnią się sposobem, w jaki przeglądarka radzi sobie z rozmiarem i umiejscowieniem. Gdy siatka jest rozplanowana, wszystkie elementy są umieszczane przed układem, a przeglądarka dokładnie wie, co znajduje się na każdym ścieżce. Umożliwia to złożone wewnętrzne określanie rozmiaru, które jest tak przydatne w przypadku siatki. W przypadku układu murarskiego elementy są umieszczane w takiej kolejności, w jakiej są ułożone, a przeglądarka nie wie, ile elementów znajduje się w każdej ścieżce. Nie jest to problem ze wszystkimi ścieżkami o rozmiarze wewnętrznym ani ze wszystkimi ścieżkami o rozmiarze stałym, ale występuje, gdy połączysz ścieżki o rozmiarze stałym i wewnętrznym. Aby rozwiązać ten problem, przeglądarka musi wykonać krok wstępny polegający na rozmieszczeniu każdego elementu na wszystkie możliwe sposoby w celu uzyskania pomiarów. W przypadku dużej siatki może to powodować problemy z wydajnością układu.

Dlatego jeśli masz układ kaskadowy z definicją ścieżki grid-template-columns: 200px auto 200px, co jest bardzo powszechne w przypadku siatki, zaczniesz mieć problemy. Problemy te stają się wykładnicze po dodaniu podsiatek.

Można argumentować, że większość użytkowników nie napotka tego problemu, ale wiemy już, że ludzie mają bardzo duże siatki. Nie chcemy wprowadzać funkcji, które mają ograniczenia w sposobie użycia, jeśli istnieje alternatywne podejście.

Co robimy w przypadku elementów, które nie pasują do danej metody układu?

Gdy flexbox i grid stały się częścią CSS, programiści często uważali, że działają w niekonsekwentny sposób. Niespójność, z którą się spotkali, wynikała z długotrwałych założeń dotyczących działania układu, opartych na układzie blokowym. Z czasem deweloperzy zaczęli rozumieć konteksty formatowania. Gdy przełączymy się na kontekst formatowania siatki lub flex, niektóre elementy będą zachowywać się inaczej. Na przykład wiesz, że w modelu Flexbox nie wszystkie metody wyrównania są dostępne, ponieważ jest on jednowymiarowy.

Łączenie układu kaskadowego z przerwami w siatce przerywa to wyraźne połączenie między kontekstem formatowania a dostępnością takich elementów jak właściwości wyrównania, które są zdefiniowane w specyfikacji Box Alignment dla każdego kontekstu formatowania.

Jeśli zdecydujemy się rozwiązać opisany wcześniej problem z wydajnością, uznając w układzie kaskadowym mieszane definicje ścieżek wewnętrznych i stałych za nieprawidłowe, musisz pamiętać, że bardzo popularny wzorzec układów siatki nie działa w przypadku układu kaskadowego.

Istnieją też wzorce, które mają sens w przypadku układu kaskadowego, np.grid-template-columns: repeat(auto-fill, max-content), ponieważ nie ma w nim ograniczeń krzyżowych, ale w przypadku siatki pozostają nieprawidłowe. Poniżej znajdziesz listę właściwości, które powinny działać inaczej lub mieć inne prawidłowe wartości.

• grid-template-areas: W układzie kaskadowym możesz określić tylko wiersz początkowy w kierunku innym niż kaskadowy.
• grid-template: Skrót musi uwzględniać wszystkie różnice.
• Śledź wartości rozmiarów dla grid-template-columns i grid-template-rows ze względu na różnice w dopuszczalnych wartościach.
• grid-auto-flow nie ma zastosowania do układu kaskadowego, a masonry-auto-flow nie ma zastosowania do układu siatki. Połączenie tych elementów spowodowałoby problemy z elementami, które są nieprawidłowe ze względu na używaną metodę układu.
• Siatka ma 4 właściwości umieszczania (grid-column-start itd.), a układ kaskadowy tylko 2.
• Siatka może używać wszystkich 6 właściwości justify-* i align-*, ale układ kaskadowy używa tylko podzbioru, podobnie jak element flex.

Konieczne będzie też określenie, co się stanie we wszystkich nowych przypadkach błędów spowodowanych przez deweloperów, którzy używają wartości nieprawidłowej w przypadku siatki z układem kaskadowym lub siatki bez układu kaskadowego. Na przykład możesz użyć właściwości grid-template-columns: masonry lub grid-template-rows: masonry, ale nie obu naraz. Co się stanie, jeśli użyjesz obu jednocześnie? Te szczegóły muszą być określone, aby wszystkie przeglądarki działały w ten sam sposób.

Z punktu widzenia specyfikacji staje się to skomplikowane, zarówno teraz, jak i w przyszłości. Musimy się upewnić, że wszystko uwzględnia układ kaskadowy i czy w nim działa. Jest to też mylące z punktu widzenia deweloperów. Dlaczego musisz pamiętać, że pomimo używania display: grid niektóre rzeczy nie działają z powodu użycia układu kaskadowego?

Alternatywna oferta

Jak już wspomnieliśmy, zespół Chrome chce zdefiniować układ kaskadowy poza specyfikacją siatki. Nie oznacza to, że będzie ona ograniczona do bardzo prostej metody układu z identycznymi rozmiarami kolumn. Wszystkie wersje demonstracyjne w poście WebKit byłyby nadal możliwe.

Uwaga: w przykładach użyto właściwości display: masonry i masonry-*. To, czy masonry jest najlepszą nazwą do użycia, tomasonry

.

Klasyczny układ murarski

Większość osób, myśląc o układzie kaskadowym, wyobraża sobie układ z kilkoma kolumnami o jednakowej szerokości. Można to zdefiniować za pomocą tego kodu CSS, który wymaga mniejszej liczby wierszy niż odpowiednia wersja z siatką.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Używanie rozmiarów ścieżek typu siatki dla różnych szerokości kolumn

Oprócz wspomnianego wcześniej problemu z rozmiarem ścieżki mieszanej (wewnętrznym i stałym) możesz używać wszystkich rozmiarów ścieżek, które znasz z siatki. Na przykład przykład z posta na blogu WebKit, czyli wzór powtarzających się wąskich i szerszych kolumn.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

Dodatkowe rozmiary ścieżek w przypadku układu kaskadowego

Istnieją dodatkowe opcje rozmiaru ścieżki, których nie zezwalamy w siatce, ponieważ siatka jest dwuwymiarową metodą układu. Byłoby to przydatne w przypadku układu kaskadowego, ale mylące, gdyby nie działało w przypadku siatki.

Automatyczne wypełnianie ścieżek o rozmiarze max-content.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, max-content);
  gap: 1rem;
}

Automatyczne wypełnianie ścieżek o rozmiarze auto, co spowoduje utworzenie ścieżek o tym samym rozmiarze, automatycznie dostosowanym do największej ścieżki.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

Zezwalaj na rozciąganie treści na kolumny i umieszczaj elementy w układzie murarskim

Nie ma powodu, aby treści obejmujące kolumny nie były w osobnej specyfikacji układu kaskadowego. Może to być właściwość masonry-track, która jest skrótem od masonry-track-start i masonry-track-end, ponieważ w układzie kaskadowym masz tylko 1 wymiar, w którym możesz rozmieścić elementy.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
}

.span-2 {
  masonry-track: span 2; /* spans two columns */
}

.placed {
  masonry-track: 2 / 5; /* covers tracks 2, 3, and 4 */
}

Podsiatka lub podsiatka przyjmująca ścieżki siatki

Można to osiągnąć za pomocą osobnej specyfikacji układu kaskadowego, ale pod warunkiem, że nie można używać ścieżek o mieszanych rozmiarach wewnętrznych i stałych. Należy określić, jak to będzie wyglądać. Nie widzimy powodu, dla którego to rozwiązanie miałoby nie działać.

Podsumowanie

Chcielibyśmy osiągnąć taki poziom specyfikacji, który umożliwiłby wysyłanie współdziałających ze sobą produktów. Chcemy jednak zrobić to w sposób, który będzie dobrze działać teraz i w przyszłości oraz na którym deweloperzy będą mogli polegać. Jedynym sposobem na rozwiązanie opisanych problemów z wydajnością byłoby pogorszenie drugiego problemu, czyli nieprawidłowego rozmieszczenia elementów siatki w układzie kaskadowym. Nie uważamy, że jest to dobre rozwiązanie, zwłaszcza gdy można mieć wszystkie funkcje siatki, zachowując wyraźne rozdzielenie elementów, które się od siebie różnią.

Jeśli masz jakieś uwagi, dołącz do dyskusji w wątku 9041.

Dziękujemy Bramusowi, Tabowi Atkinsowi-Bittnerowi, Unie Kravets, Ianowi Kilpatrickowi i Chrisowi Harrelsonowi za sprawdzenie tego posta i dyskusje, które wpłynęły na jego treść.