Display grid oraz kolumny i wiersze szablonu
Włączą Państwo CSS Grid i zdefiniują ścieżki kolumn oraz wierszy za pomocą grid-template-columns i grid-template-rows.
Display grid oraz kolumny i wiersze szablonu 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.
Włączanie CSS Grid
CSS Grid zostaje aktywowany przez ustawienie display: grid na kontenerze. Jego bezpośrednie elementy potomne automatycznie stają się elementami siatki, umieszczanymi w komórkach.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>grid-template-columns
grid-template-columns określa liczbę i rozmiar kolumn. Każda wartość tworzy jedną ścieżkę kolumny.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>grid-template-rows
grid-template-rows określa jawne ścieżki wierszy. Elementy wykraczające poza zdefiniowane wiersze tworzą wiersze niejawne.
<div class="layout" style="min-height:220px;">
<div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
<div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>Ścieżki kolumn i wierszy
Każda wartość w grid-template-columns lub grid-template-rows tworzy jedną ścieżkę. Ścieżki mogą używać dowolnej jednostki rozmiaru:
- Stałe:
200px,10rem - Elastyczne:
1fr - Zależne od zawartości:
auto,min-content,max-content
Jednostka fr
fr (jednostka ułamkowa) rozdziela dostępną przestrzeń po odjęciu stałych rozmiarów. 1fr 2fr tworzy kolumny w proporcji 1:2.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>auto w ścieżkach
auto w ścieżce dopasowuje jej rozmiar do zawartości. Jako kolumna przyjmuje minimalny rozmiar wymagany przez najszerszą komórkę, a jako wiersz — rozmiar pozwalający zmieścić najwyższą komórkę.
<div class="sidebar-layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>Przykład układu strony
Typowy układ strony z trzema wierszami: nagłówkiem, sekcją główną i stopką:
<div class="page">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
<footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>Skrótowa właściwość grid-template
grid-template łączy definicje wierszy i kolumn:
<div class="grid" style="display:grid;min-height:180px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>Inspekcja Grid w DevTools
DevTools przeglądarek Chrome i Firefox mogą nakładać linie ścieżek siatki na stronę. Kliknij oznaczenie siatki w panelu Elements, aby zobaczyć kolumny, wiersze, odstępy i nazwane obszary.
Wybór między Grid a Flexbox
Proszę użyć Grid, gdy trzeba jednocześnie kontrolować wiersze i kolumny. Flexbox służy do układów jednowymiarowych — wiersza elementów albo kolumny elementów. Wiele układów korzysta z obu rozwiązań.
Numery linii
Grid automatycznie numeruje linie, zaczynając od 1. Można odwoływać się do tych numerów, aby ręcznie rozmieszczać elementy. Linie kolumn mają numery od 1 do n+1, gdzie n oznacza liczbę kolumn.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>Sprawdź się
Co tworzy grid-template-columns: 200px 1fr 2fr?
Podsumowanie
display: grid tworzy kontener siatki. Właściwości grid-template-columns i grid-template-rows definiują ścieżki. Jednostka fr proporcjonalnie rozdziela pozostałą przestrzeń. auto dopasowuje rozmiar do zawartości. Grid doskonale nadaje się do kontrolowania układów dwuwymiarowych.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Display grid oraz kolumny i wiersze szablonu” jest bezpłatna?
Tak — pełny tekst „Display grid oraz kolumny i wiersze szablonu” 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 „Display grid oraz kolumny i wiersze szablonu”?
Włączą Państwo CSS Grid i zdefiniują ścieżki kolumn oraz wierszy za pomocą grid-template-columns i grid-template-rows. Ć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 „Display grid oraz kolumny i wiersze szablonu”?
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