Nazwane linie i nazwane obszary siatki
Nauczy się Pan/Pani nazywać linie i obszary siatki, aby rozmieszczanie elementów było czytelniejsze i łatwiejsze w utrzymaniu.
Nazwane linie i nazwane obszary siatki to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 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.
Nazywanie linii siatki
Liniom siatki można nadawać nazwy w nawiasach kwadratowych wewnątrz grid-template-columns i grid-template-rows. Nazwane linie sprawiają, że kod pozycjonowania jest czytelniejszy niż w przypadku używania samych numerów.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Umieszczanie elementów za pomocą nazwanych linii
Do czytelnego pozycjonowania należy używać nazwanych linii we właściwościach grid-column i grid-row:
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Nazwy linii z przyrostkami -start i -end
Po zdefiniowaniu nazwanych obszarów za pomocą grid-template-areas CSS automatycznie tworzy nazwane linie z przyrostkami -start i -end, do których można się odwoływać.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Powtarzające się nazwane linie
Podczas używania repeat() można umieścić nazwy wewnątrz powtarzanego wzorca. Do nazw linii dodawane są przyrostki liczbowe, aby je rozróżnić.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Rozciąganie między nazwanymi liniami
Należy używać nazwanych linii wraz ze słowem span, aby rozciągnąć element na określoną liczbę nazwanych ścieżek:
<div class="grid">
<div class="header">Header spans 3</div>
<div>A</div><div>B</div><div>C</div>
</div>Podsumowanie nazwanych obszarów
Nazwane obszary (za pomocą grid-template-areas) są najbardziej czytelnym sposobem pozycjonowania elementów:
<div class="page">
<header>Header</header>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>Nazwane linie w złożonych układach
Nazwane linie sprawdzają się szczególnie dobrze w złożonych układach redakcyjnych z wieloma elementami rozciągającymi się na kilka ścieżek:
<div class="magazine">
<div class="full-bleed">Full bleed banner</div>
<div class="article">Article content</div>
</div>Łączenie nazw i numerów
W tej samej siatce można swobodnie łączyć nazwane linie i numery linii:
<div class="layout"><div class="item">Item</div></div>Wiele nazw jednej linii
Pojedyncza linia może mieć wiele nazw — jest to przydatne, gdy linia służy jednocześnie jako koniec jednego obszaru i początek innego:
<div class="grid">
<div>Sidebar</div>
<div>Content</div>
</div>Niejawne nazwane linie z obszarów
Jeśli zdefiniują Państwo nazwany obszar o nazwie "main", automatycznie zostaną utworzone linie main-start (kolumnowa i wierszowa) oraz main-end, dzięki czemu można ich używać do nakładających się elementów.
Debugowanie nazwanych linii w DevTools
DevTools przeglądarek Chrome i Firefox mogą wyświetlać nazwane linie siatki jako etykiety na nakładce. W panelu Layout należy włączyć etykiety linii, aby sprawdzić poprawność nazw.
Szybkie sprawdzenie
Jakie nazwy linii są automatycznie tworzone po zdefiniowaniu nazwanego obszaru siatki "sidebar" w grid-template-areas?
Podsumowanie
Nazwy linii siatki należy umieszczać w nawiasach kwadratowych wewnątrz definicji ścieżek, aby pozycjonowanie było czytelne. Nazwane obszary automatycznie generują nazwy linii z przyrostkami -start i -end. Jedna linia może mieć wiele nazw. Nazwane linie można swobodnie łączyć ze słowem span i numerami. Do wizualizacji nazwanych linii jako nakładek należy używać DevTools.
Często zadawane pytania
Czy lekcja „Nazwane linie i nazwane obszary siatki” jest bezpłatna?
Tak — pełny tekst „Nazwane linie i nazwane obszary siatki” 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 „Nazwane linie i nazwane obszary siatki”?
Nauczy się Pan/Pani nazywać linie i obszary siatki, aby rozmieszczanie elementów było czytelniejsze i łatwiejsze w utrzymaniu. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Nazwane linie i nazwane obszary siatki”?
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