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.

Trzy karty są wyświetlane obok siebie. Każda z nich zawiera 3 elementy: nagłówek, akapit i link. Każdy z nich ma inną długość tekstu, co powoduje nierówne wyrównanie kart, gdy są one umieszczone obok siebie.

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

Trzy karty są wyświetlane obok siebie. Każda z nich zawiera 3 elementy: nagłówek, akapit i link. Każdy z nich ma inną długość tekstu, ale w subgrid zostały poprawione wyrównania dzięki temu, że najwyższy element treści w każdej linii określa jej wysokość, co rozwiązuje problemy z wyrównaniem.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

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 */
}
Zrzut ekranu przedstawiający siatkę CSS w Narzędziach dla programistów, w której widoczne są 2 kolumny obok siebie z nazwą na początku linii kolumny.
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.

Zrzut ekranu z trybułu deweloperskiego sieci CSS w Chrome, który pokazuje układ siatki w wersji mobilnej. Wiersze i kolumny mają nazwy ułatwiające szybką identyfikację: pełny obraz, stan systemu, menu główne, nagłówek główny, główna część, stopka i gesty systemowe.

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.

Ta sama siatka w narzędziach programistycznych CSS jak wcześniej, ale tym razem z częścią interfejsu mobilnego systemu, cieniami i niewielką ilością kolorów. pomaga zobaczyć, w jaką stronę zmierza projekt;

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.

Zrzut ekranu przedstawiający powiększony podgląd siatki w Narzędziach dla programistów, ze szczególnym uwzględnieniem nazw kolumn fullbleed-start i fullbleed-end.

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;
}
Gotowy układ makra z wbudowanym obrazem o pełnej szerokości, który znajduje się w wierszach głównego menu i nagłówka oraz rozciąga się na wszystkie wiersze kolumn o pełnej szerokości.
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.

Zrzut ekranu z widocznym plakietką podgridu w panelu Elementy

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.