Podsiatka CSS

Siatka CSS to bardzo zaawansowany mechanizm układu, ale wiersze i ścieżek kolumn utworzonych w siatce nadrzędnej można używać tylko do pozycjonowania elementów potomnych kontenera siatki. Każdy autor zdefiniowany przez nazwane obszary siatki wiersze zostały utracone w przypadku dowolnego innego elementu niż bezpośredni element podrzędny. Dzięki subgrid można udostępniać rozmiary oraz szablony i nazwy ścieżek z zagnieżdżonymi siatkami. Z tego artykułu dowiesz się, jak to działa.

Przed siatką tekstu treści były często dostosowane ręcznie w celu uniknięcia nierównych układów, takich jak tego.

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

Podstawy podsieci

Oto przykładowy przypadek użycia przedstawiający podstawy CSS subgrid. O siatka jest zdefiniowana za pomocą 2 nazwanych kolumn, przy czym pierwsza ma szerokość 20ch, a druga to „reszta” w pokoju 1fr. Nazwy kolumn nie są wymagane, ale są 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 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 */
}

To wszystko. Kolumny siatki nadrzędnej zostały przekazane do poziomu podsiatkę. Ta siatka podrzędna może teraz przypisywać elementy podrzędne do dowolnej z tych kolumn.

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

Udostępnianie makra na poziomie strony siatka

Projektanci często pracują ze wspólnymi siatkami, rysując linie na całym projekcie, wyrównywanie dowolnych elementów. Teraz mogą to robić też deweloperzy stron internetowych. To dokładne i wielu innych zastosowań.

Wdrożenie najpopularniejszego przepływu pracy projektanta siatki może zapewnić informacje o możliwościach, przepływach pracy i potencjach aplikacji subgrid.

Oto zrzut ekranu z makrem układu strony mobilnej wykonany w Narzędziach deweloperskich w Chrome siatkę. Linie mają nazwy i wyraźne obszary na umieszczenie komponentu.

Następujący CSS tworzy tę siatkę z nazwanymi wierszami i kolumnami dla urządzenia układ. Każdy wiersz i kolumna ma przypisany 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 dają taki wygląd.

Wewnątrz tego elementu nadrzędnego znajdują się różne zagnieżdżone elementy. Projekt wymaga pełnego czyli szerokość obrazu poniżej paska nawigacyjnego i wierszy nagłówka. Najbardziej wysunięta lewa i prawa kolumna nazwy wierszy 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.

Mając ogólny układ urządzenia z ładnymi nazwami wierszy i kolumn, użyj funkcji subgrid, aby przekazać wiersze i kolumny o odpowiednich nazwach do zagnieżdżonych układów siatki. To jest subgridmagiczna chwila. Układ urządzenia przekazuje nazwane wiersze i do kontenera aplikacji, który następnie przekazuje go do dzieci.

.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 oraz kolumny, na które element rozciąga się od elementu nadrzędnego, są teraz tymi samymi wierszami; dostępne kolumny. Spowoduje to udostępnienie nazw linii z siatki .device do dzieci w wieku .app, a nie tylko .app. Elementy w elemencie .app były nie można odwoływać się do ścieżek siatki utworzonych przez użytkownika .device przed siatką.

Po zdefiniowaniu wszystkich tych ustawień obraz zagnieżdżony może teraz wypełnić całą stronę dzięki opcji subgrid. Żadnych ujemnych wartości ani sztuczek, zamiast tego ładny jednowierszowy z napisem „mój układ obejmuje od fullbleed-start do fullbleed-end”.

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

I tak wygląda siatka makro, którą używają projektanci, zaimplementowana w kodzie CSS. To pojęcie może się skalować i rozwijać wraz z Twoimi potrzebami.

Sprawdź pomoc

Stopniowe wprowadzanie ulepszeń za pomocą CSS i podsiatki jest proste i zrozumiałe. Użyj słowa @supports, a w nawiasach zapytaj przeglądarkę, czy je rozumie jako wartości dla kolumn lub wierszy szablonu. Ten przykład pozwala sprawdzić, czy właściwość grid-template-columns obsługuje słowo kluczowe subgrid, które, jeśli true oznacza, ż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 z arkuszami CSS, a Chrome Edge i Firefox mają specjalne narzędzia ułatwiające korzystanie z podsiatki. Premiera Chrome swoich narzędzi 115 podczas W Firefoksie działają one od roku lub dłużej.

Plakietka podrzędnej siatki działa jak plakietka siatki, ale wizualnie odróżnia to, są subsiatkami, a które nie.

Zasoby

Ta lista jest kompilacją artykułów o podsiatce, prezentacji i ogólnej inspiracji . Jeśli szukasz kolejnego kroku do wprowadzenia podsieci edukacja, baw się dobrze, odkrywając wszystkie te wspaniałe zasoby!

• MDN
• Rachel Andrew z dopasowanymi napisami
• Rachel Andrew z 10 świetnymi przykładami
• Rachel Andrew z witryną przykładów
• Artykuł na temat Ahmada Shadeeda
• Michelle Barker na konferencji CSS Day 2022
• Karty
  • Codepen firmy Jhey
  • Codepen autorstwa Ahmada Shadeda
  • Codepen autorstwa Takeshiego Kano
  • Codepen firmy Arvid
  • Codepen Chrisa Coyiera
  • Codepen firmy Miriam Suzanne
• Chris Coyier z formularzami
• Facundo Corradini i wyrównanie formy
• Chris Coyier z dopasowanymi znacznikami elementów na liście
• Michelle Barker wyskakuje z kontenera, aby dopasować się do siatki nadrzędnej
• Miriam Suzanne pokazująca nazwane nazwy wierszy i interakcje z podsiatką
• Kevin Powell z podstawowymi informacjami o okolicy
• Kevin Powell z dopasowanymi listami
• Shannon Moeller z dopasowanymi listami
• Kevin Powell z siatką na poziomie strony przekazywaną do komponentów
• Elad Shechter z przesłonką devtool i zastępczymi funkcjami
• Aaron Iker używa subgridu do wyrównania linii bazowej odnośników
• Adam Argyle na obrazie z pełnym spadem wewnątrz artykułu