CSS Academy · Lekcja

Siatka niejawna i grid-auto-flow

Pozna Pan/Pani sposób, w jaki CSS Grid obsługuje elementy wykraczające poza jawnie zdefiniowane ścieżki, używając niejawnych wierszy i kolumn.

Siatka niejawna i grid-auto-flow 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.

Jawna i niejawna siatka

Jawna siatka jest definiowana przez grid-template-columns i grid-template-rows. Gdy elementy wykraczają poza zdefiniowane ścieżki, przeglądarka automatycznie tworzy niejawne ścieżki.

grid-auto-rows

Definiuje rozmiar niejawnie utworzonych ścieżek wierszy. Bez tej właściwości niejawne wiersze są dopasowywane do zawartości (auto).

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

grid-auto-rows z minmax

Należy ustawić niejawnym wierszom co najmniej określoną wysokość, umożliwiając im jednocześnie rozszerzanie się:

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

Definiuje rozmiary niejawnych ścieżek kolumn, gdy elementy są umieszczane poza zakresem jawnych kolumn:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

Steruje sposobem umieszczania elementów przez algorytm automatycznego pozycjonowania:

row (domyślnie) — umieszczanie w wierszach i dodawanie nowych wierszy w razie potrzeby
column — umieszczanie w kolumnach i dodawanie nowych kolumn
row dense — agresywne wypełnianie luk przez cofanie się
column dense — gęste wypełnianie w kierunku kolumn

grid-auto-flow: dense

dense powoduje, że algorytm próbuje wypełnić luki pozostawione przez elementy rozciągające się na wiele ścieżek. Może to sprawić, że elementy pojawią się poza kolejnością.

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

Wzorzec przepływu kolumnowego

Poziomo przewijany pas kart, w którym kolumny są dodawane w razie potrzeby:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

Gęste upakowanie galerii

Galeria zdjęć o mieszanych rozmiarach, która wypełnia luki:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

Niejawna siatka i nazwane obszary

Nazwane obszary dotyczą wyłącznie jawnej siatki. Elementy umieszczone w niejawnej siatce nie mogą bezpośrednio korzystać z pozycjonowania za pomocą nazwanych obszarów — wymagają pozycjonowania za pomocą numerów linii lub słowa span.

Wizualizacja niejawnej siatki

W Chrome DevTools nakładka układu pokazuje zarówno jawne (ciągłe), jak i niejawne (przerywane) linie siatki. Pomaga to zrozumieć, gdzie trafiają elementy pozycjonowane automatycznie.

Sterowanie rozmiarem niejawnych ścieżek dla poszczególnych elementów

Elementy rozciągające się na wiele wierszy w niejawnej siatce wymagają właściwości grid-auto-rows, aby uzyskać prawidłowe rozmiary. Bez niej niejawne wiersze są dopasowywane do zawartości, co może prowadzić do nierównych układów.

Szybkie sprawdzenie

Co robi grid-auto-flow: row dense?

Podsumowanie

Niejawna siatka rozszerza jawną siatkę o ścieżki tworzone automatycznie. Właściwości grid-auto-rows/columns sterują ich rozmiarem, a minmax() zapewnia im elastyczność. grid-auto-flow określa kierunek pozycjonowania. Gęste upakowanie za pomocą dense agresywnie wypełnia luki — jest przydatne w układach w stylu masonry, ale może zaburzyć kolejność wizualną.

Często zadawane pytania

Czy lekcja „Siatka niejawna i grid-auto-flow” jest bezpłatna?

Tak — pełny tekst „Siatka niejawna i grid-auto-flow” 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 „Siatka niejawna i grid-auto-flow”?

Pozna Pan/Pani sposób, w jaki CSS Grid obsługuje elementy wykraczające poza jawnie zdefiniowane ścieżki, używając niejawnych wierszy i kolumn. Ć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 „Siatka niejawna i grid-auto-flow”?

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

← Powrót do CSS Academy