Subgrid dla wyrównanej zagnieżdżonej zawartości
Nauczy się Pan/Pani używać subgrid do wyrównywania zagnieżdżonych elementów siatki względem ścieżek siatki nadrzędnej.
Subgrid dla wyrównanej zagnieżdżonej zawartości to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Problem z subgrid
Częste wyzwanie: mają Państwo siatkę kart, z których każda zawiera nagłówek, treść i stopkę. Bez subgrid elementy w różnych kartach nie mogą być wyrównane względem tych samych linii bazowych, ponieważ każda karta ma własny, niezależny układ.
Czym jest Subgrid?
subgrid to wartość właściwości grid-template-columns lub grid-template-rows, która sprawia, że zagnieżdżona siatka dziedziczy definicje ścieżek siatki nadrzędnej i uczestniczy w ich układzie.
grid-template-rows: subgrid
Element siatki, który jest jednocześnie kontenerem siatki, może używać subgrid, aby wyrównywać swoje elementy potomne względem ścieżek siatki nadrzędnej:
<div class="card-grid">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
</div>grid-template-columns: subgrid
Analogicznie, użycie subgrid dla kolumn pozwala wyrównywać zagnieżdżone elementy względem ścieżek kolumn siatki nadrzędnej — jest to przydatne na przykład przy wyrównywaniu par etykieta-wartość lub pól formularza w kolumnach kart.
Subgrid a align-content
Bez subgrid można częściowo wyrównywać zawartość za pomocą align-content lub stałych wysokości, ale takie rozwiązanie jest podatne na błędy. Subgrid umożliwia rzeczywiste wyrównanie oparte na faktycznych wysokościach zawartości.
Wyrównywanie formularza za pomocą subgrid
Wyrównywanie par etykieta-pole w wielu kolumnach formularza:
<div class="form-grid">
<div class="form-section">
<label>Name</label><input placeholder="Name" />
<label>Email</label><input placeholder="Email" />
</div>
</div>Subgrid obejmuje wiersze i kolumny
Subgrid może obejmować wiele ścieżek siatki nadrzędnej i dziedziczyć ścieżki w obu kierunkach:
<div class="layout"><div class="feature">Feature spans grid</div></div>Nazwane obszary z subgrid
Gdy subgrid dziedziczy nazwane ścieżki od siatki nadrzędnej, nazwy te są dostępne podczas rozmieszczania elementów wewnątrz kontenera subgrid.
Dziedziczenie odstępów
Subgrid domyślnie dziedziczy wartości gap siatki nadrzędnej. Zagnieżdżona siatka uczestniczy w tym samym systemie odstępów między elementami.
Informacja o obsłudze przeglądarek
Subgrid jest dostępny w Firefoksie od 2019 roku. Chrome dodał obsługę w 2023 roku. Obecnie obsługują go wszystkie nowoczesne przeglądarki. Przed użyciem w środowisku produkcyjnym należy sprawdzić obsługę wśród przeglądarek używanych przez docelowych odbiorców.
Progresywne ulepszanie za pomocą subgrid
Przed dodaniem subgrid jako ulepszenia należy zapewnić rozwiązanie zastępcze dla starszych przeglądarek, korzystając ze stałych wysokości lub wyrównywania za pomocą Flexboxa:
<div class="card-grid"><div class="card">Card content</div></div>Szybkie sprawdzenie
Co robi użycie grid-template-rows: subgrid na elemencie siatki?
Podsumowanie
Subgrid rozwiązuje problem wyrównywania zagnieżdżonej zawartości siatki, na przykład w układach kart, w których elementy należące do oddzielnych kart muszą być wyrównane względem tej samej linii bazowej. Należy używać grid-template-rows: subgrid na elementach siatki obejmujących wiele wierszy oraz grid-template-columns: subgrid w przypadku zagnieżdżonej zawartości wyrównywanej względem kolumn. Nowoczesne przeglądarki obsługują tę funkcję już powszechnie.
Często zadawane pytania
Czy lekcja „Subgrid dla wyrównanej zagnieżdżonej zawartości” jest bezpłatna?
Tak — pełny tekst „Subgrid dla wyrównanej zagnieżdżonej zawartości” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Subgrid dla wyrównanej zagnieżdżonej zawartości”?
Nauczy się Pan/Pani używać subgrid do wyrównywania zagnieżdżonych elementów siatki względem ścieżek siatki nadrzędnej. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Subgrid dla wyrównanej zagnieżdżonej zawartości”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Nazwane linie i nazwane obszary siatki
- Auto-fit i auto-fill z minmax
- Siatka niejawna i grid-auto-flow
- Subgrid dla wyrównanej zagnieżdżonej zawartości