Gap i rozmieszczanie elementów siatki
Dodadzą Państwo odstępy między komórkami siatki za pomocą gap i umieszczą elementy przy użyciu grid-column oraz grid-row.
Gap i rozmieszczanie elementów siatki to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 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.
Odstęp w CSS Grid
Właściwość gap ustawia przestrzeń między wierszami i kolumnami siatki. Zastępuje starszą właściwość grid-gap i działa również we Flexbox.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>row-gap i column-gap
Można niezależnie ustawić odstępy między wierszami i kolumnami:
<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>Numery linii siatki
CSS Grid numeruje linie, zaczynając od 1. Siatka z 3 kolumnami ma linie kolumn o numerach 1, 2, 3 i 4. Liczby ujemne liczą od końca: -1 oznacza ostatnią linię, a -2 — przedostatnią.
grid-column i grid-row
Można ręcznie rozmieszczać elementy, używając numerów linii wraz z właściwościami grid-column i grid-row:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
<div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
<div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>Słowo kluczowe span
Użyj span, aby określić, ile ścieżek ma obejmować element, zamiast podawać bezwzględne numery linii:
<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Ujemne numery linii
Ujemne indeksy liczą od końca. 1 / -1 zawsze obejmuje całą szerokość siatki, niezależnie od liczby kolumn:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>Skrótowa właściwość grid-area
grid-area ustawia wszystkie cztery wartości rozmieszczenia w siatce za pomocą jednej właściwości: row-start / column-start / row-end / column-end.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
<div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Automatyczne rozmieszczanie
Elementy, których nie rozmieszczono jawnie, są umieszczane automatycznie w następnej dostępnej komórce zgodnie z algorytmem grid-auto-flow. Domyślnie przeglądarka wypełnia komórki od lewej do prawej i od góry do dołu.
justify-items i align-items w Grid
W kontenerze siatki justify-items wyrównuje zawartość komórek w poziomie, a align-items — w pionie. Wartością domyślną obu właściwości jest stretch.
<div class="grid" style="min-height:120px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>justify-self i align-self
Pojedyncze elementy siatki mogą nadpisać wyrównanie kontenera za pomocą właściwości justify-self i align-self:
<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
<div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>Nakładające się elementy siatki
Wiele elementów może zajmować tę samą komórkę siatki. Użyj z-index, aby określić, który element ma być wyświetlany na wierzchu. Umożliwia to tworzenie warstwowych projektów, takich jak obraz z tekstem nakładanym na wierzchu.
<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
<div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
<div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>Sprawdź się
Element ma ustawienie grid-column: 2 / span 3. Które kolumny zajmuje w siatce z 5 kolumnami?
Podsumowanie
gap dodaje odstępy między komórkami siatki. Elementy rozmieszcza się za pomocą numerów linii i właściwości grid-column oraz grid-row. Słowo kluczowe span określa liczbę obejmowanych ścieżek. Użyj 1 / -1, aby zawsze objąć wszystkie kolumny. Elementy siatki mogą nakładać się na siebie z użyciem z-index.
Często zadawane pytania
Czy lekcja „Gap i rozmieszczanie elementów siatki” jest bezpłatna?
Tak — pełny tekst „Gap i rozmieszczanie elementów 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 „Gap i rozmieszczanie elementów siatki”?
Dodadzą Państwo odstępy między komórkami siatki za pomocą gap i umieszczą elementy przy użyciu grid-column oraz grid-row. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Gap i rozmieszczanie elementów 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