Obszary szablonu siatki
Nazwą Państwo obszary siatki za pomocą grid-template-areas, aby tworzyć czytelne i semantyczne układy.
Obszary szablonu siatki 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.
Nazwane obszary siatki
grid-template-areas pozwala nazywać regiony siatki za pomocą grafiki ASCII. Dzięki temu układy są bardzo czytelne i łatwe w utrzymaniu.
Definiowanie obszarów szablonu
Każdy ujęty w cudzysłów ciąg znaków reprezentuje wiersz. Komórki o tej samej nazwie tworzą prostokątny obszar. Użyj . dla pustych komórek.
<div class="page" style="min-height:240px;">
<header style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<aside style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</aside>
<main style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Umieszczanie elementów według nazwy
Przypisz elementy siatki do nazwanych obszarów za pomocą właściwości grid-area i nazwy obszaru bez cudzysłowu:
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'header header' 'sidebar main' 'footer footer';min-height:220px;gap:4px;">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<div class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<main style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Zasady dotyczące obszarów szablonu
Nazwane obszary muszą być prostokątne. Każda komórka może należeć tylko do jednego obszaru. Nazwa obszaru nie może występować w niepołączonych komórkach — byłoby to nieprawidłowe.
Puste komórki za pomocą .
Użyj jednej lub większej liczby kropek, aby oznaczyć puste komórki w grid-template-areas:
<div class="layout" style="display:grid;min-height:200px;">
<div style="grid-area:logo;background:#4f8cff22;border:1px solid #4f8cff;">Logo</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:sidebar;background:#b57bff22;border:1px solid #b57bff;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Responsywne obszary z zapytaniami o media
Przedefiniuj grid-template-areas w zapytaniach o media, aby całkowicie zmienić strukturę układu:
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Narrow (default) preview below. Widen your browser to ≥768px to see the media query apply the two-column layout live.</p>
<div class="page" style="min-height:200px;margin-bottom:16px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Preview of the ≥768px layout (static reference — not driven by the media query):</p>
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-areas:'header header' 'sidebar main' 'footer footer';gap:4px;min-height:160px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Generowane nazwane linie
Po nazwaniu obszaru CSS automatycznie tworzy nazwane linie siatki: area-start i area-end zarówno dla wierszy, jak i kolumn.
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'aside main' 'aside main';gap:0;min-height:160px;">
<div style="grid-area:aside;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Aside</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content</div>
<div class="overlay" style="grid-row:1/3;background:rgba(255,99,71,0.3);border:2px dashed tomato;padding:4px;">Overlay via named lines main-start / main-end</div>
</div>Łączenie obszarów i numerów linii
W tej samej siatce mogą współistnieć nazwane obszary i jawne numery linii. Elementy można rozmieszczać według nazwy, linii lub wartości span.
Wizualny proces projektowania siatki
Typowy proces wygląda następująco: najpierw szkicuje się układ za pomocą obszarów szablonu, a następnie definiuje rozmiary kolumn i wierszy. Pozwala to oddzielić strukturę od kwestii rozmiaru.
<div class="dashboard" style="display:grid;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;">Header</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:ads;background:#b57bff22;border:1px solid #b57bff;">Ads</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Obszary szablonu a dostępność
Wizualna kolejność elementów w Grid może różnić się od kolejności w źródle DOM. Czytniki ekranowe korzystają z kolejności DOM, a nie z rozmieszczenia wizualnego. Należy zadbać o logiczną kolejność elementów w DOM, nawet gdy są one wizualnie przestawiane przez rozmieszczenie w siatce.
Skrótowa właściwość grid-template
Połącz właściwości grid-template-areas, grid-template-columns i grid-template-rows w jednej deklaracji grid-template.
<div class="page" style="display:grid;min-height:200px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Sprawdź się
Jaki znak służy w grid-template-areas do oznaczania pustej komórki?
Podsumowanie
grid-template-areas używa grafiki ASCII do nazywania regionów układu. Elementy rozmieszcza się za pomocą grid-area: name. Obszary muszą być prostokątne, a puste komórki oznacza się symbolem .. Przedefiniowanie obszarów w zapytaniach o media pozwala tworzyć w pełni responsywne układy z przejrzystym i czytelnym kodem CSS.
Często zadawane pytania
Czy lekcja „Obszary szablonu siatki” jest bezpłatna?
Tak — pełny tekst „Obszary szablonu 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 „Obszary szablonu siatki”?
Nazwą Państwo obszary siatki za pomocą grid-template-areas, aby tworzyć czytelne i semantyczne układy. Ć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 „Obszary szablonu 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
- Display grid oraz kolumny i wiersze szablonu
- Jednostka fr i funkcja repeat
- Gap i rozmieszczanie elementów siatki
- Obszary szablonu siatki