Podsiatka CSS

Siatka CSS to bardzo zaawansowany mechanizm układów, ale ścieżek wierszy i kolumn utworzonych na siatce nadrzędnej można używać tylko do pozycjonowania bezpośrednich elementów podrzędnych kontenera siatki. Wszystkie zdefiniowane przez autora nazwane obszary siatki i linie zostały utracone w przypadku innych elementów niż bezpośredni element podrzędny. W subgrid rozmiary, szablony i nazwy ścieżek można udostępniać za pomocą zagnieżdżonych siatek. Z tego artykułu dowiesz się, jak to działa.

Przed siatką podrzędną treść była często ręcznie dostosowywana, aby uniknąć niepotrzebnych układów, takich jak ten.

Obok siebie wyświetlają się 3 karty. Każda z nich zawiera 3 elementy treści: nagłówek, akapit i link. Teksty te mają różną długość, co powoduje niewłaściwe dopasowanie kart, gdy znajdują się obok siebie.

Po podsiatce, możliwe jest wyrównanie treści o zmiennych rozmiarach.

Obok siebie wyświetlają się 3 karty. Każda z nich zawiera 3 elementy treści: nagłówek, akapit i link. Każda z nich ma inną długość tekstu, ale siatka podrzędna ustaliła wyrównanie, umożliwiając najwyższy element każdego elementu treści na ustawienie wysokości wiersza, co naprawia problemy z wyrównaniem.

Obsługa przeglądarek

  • 117
  • 117
  • 71
  • 16

Źródło

Podstawowe informacje o Podsiatce

Oto prosty przypadek użycia zawierający podstawy CSS subgrid. Siatka jest zdefiniowana z 2 nazwanymi kolumnami. Pierwsza ma szerokość 20ch, a druga to „reszta” pokoju 1fr. Nazwy kolumn nie są wymagane, ale mogą służyć do celów ilustracyjnych i edukacyjnych.

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

Następnie element podrzędny tej siatki, który rozciąga się na te 2 kolumny, jest ustawiony jako kontener siatki i stosuje kolumny swojej jednostki nadrzędnej, ustawiając dla elementu grid-template-columns wartość subgrid.

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

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
Zrzut ekranu przedstawiający Narzędzia deweloperskie w siatce CSS, na których widoczne są 2 kolumny z nazwą na początku wiersza kolumn.
https://codepen.io/web-dot-dev/pen/NWezjXv

To wszystko. Kolumny siatki nadrzędnej zostały w praktyce przekazane w dół poziomu do siatki podrzędnej. Ta siatka podrzędna może teraz przypisywać elementy podrzędne do każdej z tych kolumn.

Wyzwanie! Powtórz tę samą prezentację, ale w każdym przypadku grid-template-rows.

Udostępnianie siatki „makr” na poziomie strony

Projektanci często pracują przy użyciu wspólnych siatki, rysując linie na całym projekcie i wyrównywając do niego dowolne elementy. Teraz mogą to robić również programiści stron internetowych. Ten przepływ pracy można teraz osiągnąć i wiele więcej.

Od siatki makr do gotowego projektu. nazwane obszary w siatce są tworzone z góry, a później umieszczane są odpowiednio do potrzeb;

Wdrożenie najpopularniejszego przepływu pracy projektanta siatki może zapewnić doskonały wgląd w możliwości, przepływy pracy i potencjał subgrid.

Oto zrzut ekranu z makrem układu strony mobilnej wykonany w Narzędziach deweloperskich w Chrome. Wiersze mają nazwy i są widoczne obszary na potrzeby rozmieszczenia komponentów.

Zrzut ekranu z narzędzi deweloperskich w Chrome CSS z układem siatki o rozmiarze na urządzenia mobilne, gdzie wiersze i kolumny są nazwane w celu szybkiej identyfikacji: pełny spad, stan systemu, główna-nawigacja, nagłówek główny, główny, stopka i gesty systemowe.

Ta siatka ma nazwane wiersze i kolumny dla układu urządzenia, korzystając z podanego niżej kodu CSS. 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 nadają się do tego wzoru.

Ta sama nakładka siatki w CSS DevTools jak poprzednio, ale tym razem z interfejsem użytkownika w wersji mobilnej, z cieniami i odrobiną koloru. Pomaga sprawdzić, dokąd zmierza projekt.

Zawiera on różne zagnieżdżone elementy. W wierszu nawigacji i nagłówków trzeba umieścić obraz o pełnej szerokości. Nazwy wierszy najbardziej od lewej i prawej to fullbleed-start i fullbleed-end. Nadanie nazw linii siatki umożliwi dzieciom wyrównanie ich względem każdej z nich jednocześnie za pomocą skrótu dotyczącego miejsca docelowego fullbleed. Jak już wkrótce zobaczycie, to bardzo wygodne.

Powiększony zrzut ekranu przedstawiający nakładkę siatki z Narzędzi deweloperskich ze skupieniem się na nazwach kolumn z pełnym spadem na początku i na końcu.

Gdy ogólny układ urządzenia został utworzony z ładnymi nazwami wierszy i kolumn, użyj funkcji subgrid, aby przekazywać prawidłowo nazwane wiersze i kolumny do zagnieżdżonych układów siatki. Oto subgrid magiczna chwila. Układ urządzenia przekazuje nazwane wiersze i kolumny do kontenera aplikacji, który następnie przekazuje je do wszystkich swoich elementów podrzędnych.

.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 łączy element z elementu nadrzędnego, są teraz tymi samymi wierszami i kolumnami, które udostępnia. Dzięki temu nazwy wierszy z siatki .device będą dostępne dla elementów podrzędnych obszaru .app, a nie tylko .app. Elementy w obrębie .app nie mogły odwoływać się do ścieżek siatki utworzonych przez .device przed siatką podrzędną.

Po zdefiniowaniu tych wszystkich ustawień zagnieżdżony obraz może się teraz wypełnić w układzie pełnym spadem dzięki technologii subgrid. Żadnych ujemnych wartości ani sztuczek, zamiast tego ładny, krótki tekst z informacją, że mój układ obejmuje od fullbleed-start do fullbleed-end.

.app > main img {
    grid-area: fullbleed;
}
Gotowy układ makra, wraz z zagnieżdżonym zagnieżdżonym obrazem o pełnej szerokości, prawidłowo umieszczony w głównym panelu nawigacyjnym i wierszach nagłówka, rozciągający się do linii nazwanych kolumn z pełnym spadem.
https://codepen.io/web-dot-dev/pen/WNLyjzX

Oto siatka makra, taka jak używana przez projektantów, zaimplementowany w kodzie CSS. Rozwiązanie to można skalować i rozwijać w miarę potrzeb.

Sprawdź, czy masz dostęp do pomocy

Stopniowe wprowadzanie udoskonaleń za pomocą CSS i siatki podrzędnej jest znane i proste. Użyj operatora @supports i w nawiasie zapytaj przeglądarkę, czy rozpozna siatkę jako wartość kolumn lub wierszy szablonu. W poniższym przykładzie sprawdzisz, czy właściwość grid-template-columns obsługuje słowo kluczowe subgrid. Jeśli wartość to prawda, oznacza to, że można używać siatki podrzędnej

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

Narzędzia deweloperskie

Zarówno Chrome, Edge, Firefox i Safari mają narzędzia deweloperskie z siatką CSS, a dla Chrome, Edge i Firefox specjalne narzędzia ułatwiające pracę nad podsiatką. Chrome zaprezentował swoje narzędzia już od roku 115, a w Firefoksie już od co najmniej roku.

Zrzut ekranu pokazujący plakietkę siatki podrzędnej widocznej na elementach panelu Elementy.

Dodatkowa siatka działa jak plakietka siatki, ale wizualnie pozwala odróżnić poszczególne siatki.

Zasoby

Ta lista to zbiór przydatnych artykułów, prezentacji i ogólnych inspiracji. Jeśli szukasz kolejnych sposobów na rozwijanie subtelnej edukacji, zapoznaj się z tymi wspaniałymi materiałami.