Ta strona została przetłumaczona przez Cloud Translation API.

Podsiatka CSS

Opublikowano: 28 września 2023 r.

Siatka CSS to bardzo wydajny mechanizm układu, ale ścieżki wierszy i kolumn utworzone w siatce nadrzędnej można używać tylko do pozycjonowania bezpośrednich elementów podrzędnych kontenera siatki. Wszystkie nazwane obszary i linie siatki zdefiniowane przez autora zostały utracone w przypadku wszystkich elementów z wyjątkiem elementów podrzędnych bezpośrednich. W wersji subgrid można udostępniać rozmiary ścieżek, szablony i nazwy w ramach zagnieżdżonych siatek. Z tego artykułu dowiesz się, jak to działa.

Przed wprowadzeniem subgrid treści były często dopasowywane ręcznie, aby uniknąć nierównych układów takich jak ten.

Po subgrid można wyrównać treści o zmiennym rozmiarze.

Browser Support

Source

Podstawy dotyczące subgrid

Oto prosty przypadek użycia, który przedstawia podstawy CSS.subgrid Siatka jest zdefiniowana za pomocą 2 nazwanych kolumn: pierwsza ma szerokość 20ch, a druga zajmuje „pozostałe” miejsce 1fr. Nazwy kolumn nie są wymagane, ale są przydatne do celów poglądowych i edukacyjnych.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Następnie element podrzędny tej siatki obejmuje te 2 kolumny, jest ustawiony jako kontener siatki i przejmuje kolumny swojej jednostki nadrzędnej przez ustawienie grid-template-columns na subgrid.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

https://codepen.io/web-dot-dev/pen/NWezjXv

To wszystko. Kolumny siatki nadrzędnej zostały przekazane na niższy poziom do siatki podrzędnej. Ta subkratka może teraz przypisać podrzędne do jednej z tych kolumn.

Wyzwanie Powtórz to samo demo, ale w przypadku grid-template-rows.

Udostępnianie siatki „makro” na poziomie strony

Projektanci często korzystają z wspólnych siatek, rysując linie na całym projekcie i wyrównując do nich dowolne elementy. Teraz mogą to robić też deweloperzy stron internetowych. Teraz możesz stosować ten proces pracy i wiele innych.

Od siatki makro do gotowego projektu. Na początku tworzone są nazwane obszary siatki, a później komponenty są umieszczane w odpowiednich miejscach.

Wdrożenie najpopularniejszego przepływu pracy z siatką projektanta może zapewnić doskonałe informacje o możliwościach, przepływach pracy i potencjale subgrid.

Oto zrzut ekranu z Narzędzi programisty w Chrome przedstawiający makrosiatkowanie układu strony mobilnej. Linie mają nazwy, a poszczególne obszary są wyraźnie oznaczone.

Ten kod CSS tworzy siatkę z nazwami wierszy i kolumn dla układu urządzenia. Każdy wiersz i kolumna ma rozmiar.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

Niektóre dodatkowe style mają taki wygląd.

W tym elemencie nadrzędnym znajdują się różne elementy zagnieżdżone. Projekt wymaga umieszczenia w wierszach nawigacji i nagłówka obrazu o pełnej szerokości. Najbardziej na lewo i na prawo nazwy kolumn to fullbleed-start i fullbleed-end. Nazywanie linii siatki w ten sposób umożliwia dzieciom jednoczesne dopasowywanie się do siebie za pomocą skrótu umieszczania fullbleed. Jak zaraz zobaczysz, jest to bardzo wygodne.

Po utworzeniu ogólnego układu urządzenia z dobrze nazwanymi wierszami i kolumnami użyj elementu subgrid, aby przekazać dobrze nazwane wiersze i kolumny do zagnieżdżonych układów siatki. To jest subgridmagiczna chwila. Układ urządzenia przekazuje nazwane wiersze i kolumny do kontenera aplikacji, który przekazuje je do wszystkich swoich elementów.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

Podprzęt CSS to wartość używana zamiast listy ścieżek siatki. Wiersze i kolumny, które element obejmuje z elementu nadrzędnego, są teraz tymi samymi wierszami i kolumnami. Dzięki temu nazwy linii z kratownicy .device będą dostępne dla elementów podrzędnych .app, a nie tylko dla .app. Elementy w .app nie mogły odwoływać się do ścieżek siatki utworzonych przez .device przed utworzeniem siatki podrzędnej.

Po zdefiniowaniu wszystkich tych ustawień obraz zagnieżdżony może teraz wypełnić całą stronę dzięki opcji subgrid. Żadnych wartości ujemnych ani sztuczek, tylko zwięzły komunikat „Mój układ zawiera się z poziomu fullbleed-start do fullbleed-end”.

.app > main img {
    grid-area: fullbleed;
}

https://codepen.io/web-dot-dev/pen/WNLyjzX

Oto makrosiatka, którą projektanci stosują w CSS. Możesz skalować tę koncepcję i rozwijać ją w miarę potrzeb.

Sprawdź, czy potrzebujesz pomocy

ulepszanie stopniowe za pomocą CSS i subgrid jest proste i znane. Użyj elementu @supports i w nawiasach zapytaj przeglądarkę, czy rozumie subgrid jako wartość kolumn lub wierszy szablonu. W tym przykładzie sprawdzamy, czy właściwość grid-template-columns obsługuje słowo kluczowe subgrid. Jeśli odpowiedź jest twierdząca, oznacza to, że można użyć subgrid.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Narzędzia deweloperskie

Chrome, Edge, Firefox i Safari mają świetne narzędzia deweloperskie do tworzenia siatki CSS, a Chrome, Edge i Firefox mają specjalne narzędzia do tworzenia siatki podrzędnej. Chrome ogłosił te narzędzia w 115, a Firefox ma je od roku lub dłużej.

Plakietka siatki podrzędnej działa jak plakietka siatki, ale wizualnie odróżnia siatki podrzędne od pozostałych.

Zasoby

Ta lista zawiera kompilację artykułów, demonstracji i ogólnych inspiracji dotyczących subgrid. Jeśli szukasz dalszych informacji na temat subgridów dotyczących edukacji, zapoznaj się z tymi przydatnymi materiałami.