Podsiatka CSS

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 podsiatką treść była często dostosowana ręcznie w celu uniknięcia nierównych układów, takich jak ten.

Trzy karty widoczne obok siebie, z których każda 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 podsiatce można wyrównać treści o różnych rozmiarach.

Trzy karty są wyświetlane obok siebie. Każda z nich zawiera 3 elementy: nagłówek, akapit i link. Każda z nich ma inną długość tekstu, ale siatka podrzędna poprawiła wyrównanie, umożliwiając najwyższemu elementowi treści ustawienie wysokości wiersza, co eliminuje problemy z wyrównaniem.

Obsługa przeglądarek

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

Źródło

Podstawy podsieci

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łą część 1fr. Nazwy kolumn nie są wymagane, ale mogą posłużyć 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ę z narzędziami deweloperskimi CSS, w której widoczne są 2 kolumny obok siebie z nazwą na początku wiersza 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 siatka podrzędna może teraz przypisywać elementy podrzędne do dowolnej z tych kolumn.

Wyzwanie Powtórz tę samą prezentację, ale zrób to samo dla usługi grid-template-rows.

Udostępnianie siatki „makro” na poziomie strony

Projektanci często korzystają ze wspólnych siatek, rysują linie na całym projekcie i wyrównują go z każdym elementem. Teraz również programiści stron internetowych! Teraz możesz wykorzystać ten proces pracy i wiele innych.

Od siatki makr do projektu gotowego. Nazwane obszary siatki są tworzone z wyprzedzeniem, a później komponenty są umieszczane zgodnie z potrzebami.

Wdrożenie najpopularniejszego przepływu pracy projektanta siatki może dostarczyć wspaniałych informacji o możliwościach, przepływach pracy i potencjale funkcji subgrid.

Oto zrzut ekranu z Narzędziami dla programistów w Chrome przedstawiający makromacierz układu strony mobilnej. Linie mają nazwy i wyraźne obszary na umieszczenie komponentu.

Zrzut ekranu z siatki CSS w Narzędziach deweloperskich w Chrome, przedstawiający układ siatki o rozmiarze mobilnym, gdzie wiersze i kolumny są nazywane w celu szybkiej identyfikacji: pełny spad, stan systemu, podstawowy element nawigacyjny, podstawowy-nagłówek, główny, 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 określony 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. Nazwy linii najdalej po lewej i prawej kolumnie to fullbleed-start i fullbleed-end. Takie nazewnictwo linii siatki umożliwi dzieciom ich wyrównanie jednocześnie ze skrótem miejsc docelowych fullbleed. Przekonasz się, że to bardzo wygodne.

Powiększony zrzut ekranu z nakładką siatki z Narzędzi deweloperskich z uwagi na nazwy kolumn z pełnym spadem na początku i na końcu.

Mając ogólny układ urządzenia z dobrze nazwanymi wierszami i kolumnami, używaj funkcji subgrid, aby przekazywać wiersze i kolumny o odpowiednich nazwach do zagnieżdżonych układów siatki. Oto 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;
}

Podsiatka 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 wierszy z siatki .device będą dostępne dla elementów podrzędnych tabeli .app, a nie tylko dla elementów .app. Elementy w elemencie .app nie mogły odwoływać się do ścieżek siatki utworzonych przez element .device przed siatką.

Po zdefiniowaniu tego obrazu zagnieżdżony obraz może teraz wypełniać całą stronę układu dzięki funkcji 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 makr z zagnieżdżonym obrazem o pełnej szerokości, który jest umieszczony prawidłowo w głównym panelu nawigacyjnym i wierszach nagłówka, oraz rozciąga się do każdego z nazwanych wierszy kolumn z pełnym spadem.
https://codepen.io/web-dot-dev/pen/WNLyjzX

Oto makrosiatka, której używają projektanci, zaimplementowana w CSS. Koncepcja ta może być skalowana i rozwijać się wraz z użytkownikiem odpowiednio do potrzeb.

Sprawdź, czy potrzebujesz pomocy

Stopniowe wprowadzanie ulepszeń za pomocą CSS i podsiatki jest proste i zrozumiałe. Użyj @supports i w nawiasach zapytaj przeglądarkę, czy kolumna rozumie podsiatkę jako wartość kolumn lub wierszy szablonu. Poniższy przykład pokazuje, czy właściwość grid-template-columns obsługuje słowo kluczowe subgrid. Jeśli tak, oznacza to, że można użyć podsieci

@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. W wersji 115 Chrome przedstawił swoje narzędzia, a Firefox używa ich od co najmniej roku.

Zrzut ekranu z widocznym plakietką podgridu w panelu Elementy

Plakietka podrzędnej siatki działa jak plakietka siatki, ale wizualnie rozróżnia, które sieci są subdomenami, a które nie.

Zasoby

Ta lista zawiera artykuły dotyczące siatki, prezentacje i ogólne inspiracje na początek. Jeśli szukasz dalszych informacji na temat subgridu edukacji, zapoznaj się z tymi przydatnymi materiałami.