Odkrywanie niejawnej siatki CSS Grid i uprawnień automatycznego umieszczania

Podczas pracy z CSS Grid pierwszą rzeczą do zrobienia jest ustawienie display: grid na elemencie, którym chcemy być kontenerem siatki. Następnie jawnie definiujemy siatkę za pomocą kombinacji grid-template-columns, grid-template-rows, grid-template-areas. Następnie następnym krokiem jest umieszczenie przedmiotów w siatce.

Jest to klasyczne podejście, które należy zastosować i również je polecam. Istnieje jednak inne podejście do tworzenia siatek bez wyraźnej definicji. Nazywamy to niejawna siatka.

„Jasne, ukryte? Co tu się u licha dzieje?

Dziwne warunki, prawda? Manuel Matuzovic już ma dobre wyjaśnienie tego, co możemy przez „niejawne” i „wyraźne” w CSS Grid, ale zagłębimy się w to, co dotychczasowy sharakterystyka mówi:

Połączenia grid-template-rows, grid-template-columns, grid-template-areas właściwości definiują stałą liczbę ścieżek, które tworzą wyraźna siatka. Gdy elementy siatki są umieszczone poza tymi granicami, kontener siatki generuje niejawne ścieżki siatki, dodając niejawne linie siatki do siatki. Te linie wraz z wyraźną formą siatki niejawna siatka.

Tak więc, w prostym języku angielskim, przeglądarka automatycznie generuje dodatkowe wiersze i kolumny w przypadku, gdy jakiekolwiek elementy zostaną umieszczone poza zdefiniowaną siatką.

A co z automatycznym umieszczaniem?

Podobne do koncepcji niejawnej siatki, automatyczne rozmieszczenie to zdolność przeglądarki do automatycznego umieszczania elementów w siatce. Nie zawsze musimy podawać pozycję każdej pozycji.

W różnych przypadkach użycia zobaczymy, jak takie funkcje mogą pomóc nam w tworzeniu złożonej i dynamicznej siatki za pomocą kilku linijek kodu.

Dynamiczny pasek boczny

Tutaj mamy trzy różne układy, ale mamy tylko jedną konfigurację siatki, która działa dla nich wszystkich.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Tylko jedna kolumna zajmuje całe wolne miejsce. To jest nasza „wyraźna” siatka. Jest skonfigurowany tak, aby pasował do jednego elementu siatki w main pojemnik z siatką. To wszystko. Jedna kolumna i jeden wiersz:

Ale co by było, gdybyśmy zdecydowali się wrzucić tam jeszcze jeden element, powiedzmy… aside (nasz dynamiczny pasek boczny). Jak jest to obecnie (i jawnie) zdefiniowane, nasza siatka będzie musiała dostosować się automatycznie, aby znaleźć miejsce dla tego elementu. A jeśli nie zrobimy nic więcej z naszym CSS, oto, co mówi nam DevTools.

Możemy przenieść <aside> do kolumny obok <section>:

aside {
  grid-column-start: 2;
}

A oto, co teraz mówi nam DevTools:

Umieszczamy nasz element w drugiej kolumnie, ale… nie mamy drugiej kolumny. Dziwne, prawda? Nigdy nie zadeklarowaliśmy drugiej kolumny na <main> grid container, ale przeglądarka go dla nas stworzyła! To jest kluczowa część specyfikacji, którą przyjrzeliśmy się:

Gdy elementy siatki są umieszczone poza tymi granicami, kontener siatki generuje niejawne ścieżki siatki, dodając niejawne linie siatki do siatki.

Ta potężna funkcja pozwala nam mieć dynamiczne układy. Jeśli tylko mamy <section> element, dostajemy tylko jedną kolumnę. Ale jeśli dodamy <aside> elementu do miksu, tworzona jest dodatkowa kolumna, aby go zawierać.

Moglibyśmy umieścić <aside> przed <section> zamiast tego tak:

aside {
  grid-column-end: -2;
} 

Tworzy to niejawną kolumnę na początku siatki, w przeciwieństwie do poprzedniego kodu, który umieszcza niejawną kolumnę na końcu.

Możemy zrobić to samo łatwiej, korzystając z grid-auto-flow właściwość, aby ustawić wszystkie niejawne ścieżki do przepływu w a column kierunek:

Teraz nie ma potrzeby określać grid-column-start umieścić <aside> element na prawo od <section>! W rzeczywistości każdy inny element siatki, który zdecydujemy się tam wrzucić w dowolnym momencie, będzie teraz płynął w kierunku kolumnowym, każdy umieszczony na własnych niejawnych ścieżkach siatki. Idealny w sytuacjach, w których liczba elementów w siatce nie jest z góry znana!

Powiedział, że nadal potrzebujemy grid-column-end jeśli chcemy umieścić go w kolumnie po lewej stronie, ponieważ w przeciwnym razie <aside> zajmie wyraźną kolumnę, która z kolei popycha <section> poza jawną siatką i zmusza ją do przyjęcia niejawnej kolumny.

Wiem wiem. To trochę zawiłe. Oto kolejny przykład, którego możemy użyć, aby lepiej zrozumieć to małe dziwactwo:

W pierwszym przykładzie nie określiliśmy żadnego miejsca docelowego. W takim przypadku przeglądarka najpierw umieści <aside> element w jawnej kolumnie, ponieważ znajduje się on pierwszy w DOM. The <section>w międzyczasie jest automatycznie umieszczany w kolumnie siatki, którą przeglądarka automatycznie (lub niejawnie) tworzy dla nas.

W drugim przykładzie ustawiamy <aside> element poza wyraźną siatką:

aside {
  grid-column-end: -2;
}

Teraz to nie ma znaczenia <aside> jest na pierwszym miejscu w kodzie HTML. Poprzez ponowne przypisanie <aside> gdzie indziej zrobiliśmy <section> element dostępny do pobrania jawnej kolumny.

Siatka obrazu

Spróbujmy czegoś innego z siatką obrazów, gdzie mamy duży obraz i kilka miniatur obok niego (lub pod nim).

Mamy dwie konfiguracje siatki. Ale zgadnij co? W ogóle nie definiuję żadnej siatki! Wszystko, co robię, to:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Zaskakujące jest to, że potrzebujemy tylko jednej linii kodu, aby zrobić coś takiego, więc przeanalizujmy, co się dzieje, a zobaczysz, że jest to łatwiejsze niż myślisz. Po pierwsze, grid-area to skrócona właściwość, która łączy następujące właściwości w jedną deklarację:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Czekać! nie jest grid-area właściwość, której używamy do zdefiniowania nazwane obszary zamiast tego, gdzie elementy zaczynają się i kończą na siatce?

Tak, ale robi też więcej. Moglibyśmy napisać o wiele więcej grid-area, ale w tym konkretnym przypadku:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

To samo widzimy, otwierając narzędzia DevTools w celu rozszerzenia wersji skróconej:

Oznacza to, że pierwszy element obrazu w siatce musi rozciągać się trzy kolumny i trzy rzędy. Ale ponieważ nie zdefiniowaliśmy żadnych kolumn ani wierszy, przeglądarka robi to za nas.

Zasadniczo umieściliśmy pierwszy obraz w HTML tak, aby zajmował siatkę 3⨉3. Oznacza to, że wszelkie inne obrazy zostaną automatycznie umieszczone w tych samych trzech kolumnach bez konieczności określania czegokolwiek nowego.

Podsumowując, powiedzieliśmy przeglądarce, że pierwszy obraz musi zajmować przestrzeń trzech kolumn i trzech wierszy, których nigdy wyraźnie nie zdefiniowaliśmy podczas konfigurowania kontenera siatki. Przeglądarka ustawiła dla nas te kolumny i wiersze. W rezultacie, pozostałe obrazy w HTML trafiają na swoje miejsce, używając tych samych trzech kolumn i wierszy. A ponieważ pierwszy obraz zajmuje wszystkie trzy kolumny w pierwszym wierszu, pozostałe obrazy przechodzą do dodatkowych wierszy, z których każdy zawiera trzy kolumny, gdzie każdy obraz zajmuje jedną kolumnę.

Wszystko to z jednej linii CSS! To jest siła „ukrytej” siatki” i automatycznego umieszczania.

W przypadku drugiej konfiguracji siatki w tym demo, wszystko, co zrobiłem, to zmiana automatycznego kierunku przepływu za pomocą grid-auto-flow: column w ten sam sposób, w jaki zrobiliśmy wcześniej, umieszczając an <aside> element obok a <section>. Zmusza to przeglądarkę do utworzenia czwarty kolumna, której może użyć do umieszczenia pozostałych obrazów. A ponieważ mamy trzy wiersze, pozostałe obrazy są umieszczane w tej samej pionowej kolumnie.

Musimy dodać kilka właściwości do obrazów, aby upewnić się, że dobrze pasują do siatki bez żadnego przepełnienia:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

I oczywiście możemy łatwo zaktualizować siatkę, aby uwzględnić więcej obrazów, dostosowując jedną wartość. To byłby 3 w stylach dla dużego obrazu. Mamy to:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Ale moglibyśmy dodać czwartą kolumnę po prostu zmieniając ją na 4 zamiast:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Jeszcze lepiej: skonfigurujmy to jako właściwość niestandardową, aby jeszcze łatwiej aktualizować.

Układy dynamiczne

Pierwszym przypadkiem użycia z paskiem bocznym był nasz pierwszy dynamiczny układ. Teraz zajmiemy się bardziej złożonymi układami, w których liczba elementów będzie dyktować konfigurację siatki.

W tym przykładzie możemy mieć od jednego do czterech elementów, w których siatka dopasowuje się w sposób, który ładnie pasuje do liczby elementów bez pozostawiania niezręcznych przerw lub brakujących spacji.

Kiedy mamy jeden element, nic nie robimy. Element rozciągnie się, aby wypełnić jedyny wiersz i kolumnę automatycznie utworzone przez siatkę.

Bit, gdy dodajemy drugi element, tworzymy kolejną (niejawną) kolumnę za pomocą grid-column-start: 2.

Gdy dodamy trzeci element, powinien on zajmować szerokość dwóch kolumn — dlatego użyliśmy grid-column-start: span 2, ale tylko jeśli to :last-child bo jeśli (i kiedy) dodamy czwarty element, to powinien on zająć tylko jedną kolumnę.

Podsumowując, mamy cztery konfiguracje sieci tylko z dwie deklaracje i magia ukrytej siatki:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Spróbujmy jeszcze jednego:

Nie robimy nic w pierwszym i drugim przypadku, gdy mamy tylko jeden lub dwa elementy. Kiedy jednak dodamy trzeci element, mówimy przeglądarce, że — o ile jest to :last-child — powinien obejmować dwie kolumny. Kiedy dodajemy czwarty element, mówimy przeglądarce, że element musi być umieszczony w drugiej kolumnie.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Czy zaczynasz rozumieć sztuczkę? Przeglądarce podajemy szczegółowe instrukcje na podstawie liczby elementów (za pomocą :nth-child), a czasami jedna instrukcja może całkowicie zmienić układ.

Należy zauważyć, że rozmiar nie będzie taki sam, gdy pracujemy z różnymi treściami:

Ponieważ nie zdefiniowaliśmy żadnych rozmiarów dla naszych produktów, przeglądarka automatycznie dopasowuje je do nas na podstawie ich zawartości i możemy otrzymać inny rozmiar niż ten, który właśnie widzieliśmy. Aby to przezwyciężyć, musimy wyraźnie określ, że wszystkie kolumny i wiersze mają jednakowy rozmiar:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Hej, jeszcze nie bawiliśmy się tymi właściwościami! grid-auto-rows i grid-auto-columns ustaw rozmiar niejawnych wierszy i kolumn odpowiednio w kontenerze siatki. Lub, jak specyfikacja wyjaśnia to:

Połączenia grid-auto-columns i grid-auto-rows właściwości określają rozmiar ścieżek, do których nie przypisano rozmiaru przez grid-template-rows or grid-template-columns.

Oto kolejny przykład, w którym możemy przejść do sześciu elementów. Tym razem pozwolę ci przeanalizować kod. Nie martw się, selektory mogą wyglądać na skomplikowane, ale logika jest dość prosta.

Nawet przy sześciu elementach potrzebowaliśmy tylko dwóch deklaracji. Wyobraź sobie wszystkie złożone i dynamiczne układy, które możemy osiągnąć za pomocą kilku linijek kodu!

Co się z tym dzieje grid-auto-rows i dlaczego przyjmuje trzy wartości? Czy definiujemy trzy wiersze?

Nie, nie definiujemy trzech wierszy. Ale my jest zdefiniowanie trzech wartości jako wzorca dla naszych niejawnych wierszy. Logika jest następująca:

• Jeśli mamy jeden wiersz, zostanie on dopasowany do pierwszej wartości.
• Jeśli mamy dwa wiersze, pierwszy otrzymuje pierwszą wartość, a drugi drugą wartość.
• Jeśli mamy trzy wiersze, zostaną użyte trzy wartości.
• Jeśli mamy cztery wiersze (i tutaj pojawia się interesująca część), używamy trzech wartości dla pierwszych trzech wierszy i ponownie używamy pierwszej wartości dla czwartego wiersza. Dlatego jest to rodzaj wzorca, który powtarzamy, aby dopasować rozmiar wszystkich ukrytych wierszy.
• Jeśli mamy 100 rzędów, będą miały rozmiar trzy na trzy 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, itp.

w odróżnieniu grid-template-rows która określa ilość rzędów i ich rozmiary, grid-auto-rows tylko wiersze rozmiarów, które mogą powstać po drodze.

Jeśli wrócimy do naszego przykładu, logika polega na tym, aby mieć taki sam rozmiar, gdy tworzone są dwa wiersze (będziemy używać 2fr 2fr), ale jeśli tworzony jest trzeci wiersz, zmniejszamy go nieco.

Wzory siatki

W tym ostatnim porozmawiamy o wzorach. Prawdopodobnie widziałeś te dwa układy kolumn, w których jedna kolumna jest szersza od drugiej, a każdy wiersz zmienia rozmieszczenie tych kolumn.

Ten układ sortowania może być trudny do zrealizowania, nie wiedząc dokładnie, z jaką ilością treści mamy do czynienia, ale niejawne uprawnienia CSS Grid do automatycznego umieszczania sprawiają, że jest to stosunkowo łatwe.

Rzuć okiem na kod. Może to wyglądać na skomplikowane, ale podzielmy to, ponieważ okazuje się, że jest całkiem proste.

Pierwszą rzeczą do zrobienia jest zidentyfikowanie wzoru. Zadaj sobie pytanie: „Po ilu elementach wzór powinien się powtarzać?” W tym przypadku po każdych czterech elementach. Spójrzmy więc na użycie tylko czterech elementów na razie:

Teraz zdefiniujmy siatkę i skonfigurujmy ogólny wzór za pomocą :nth-child selektor do zmiany elementów:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Powiedzieliśmy, że nasz wzór powtarza się co cztery elementy, więc logicznie użyjemy 4n + x gdzie x waha się od 1 do 4. Trochę łatwiej jest wyjaśnić wzór w ten sposób:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Idealnie, prawda? Mamy cztery elementy i powtarzamy wzór na piątym elemencie, dziewiątym elemencie i tak dalej.

Ci, :nth-child selektory mogą być trudne! Chris ma bardzo pomocną wyjaśnienie, jak to wszystko działa, w tym przepisy na tworzenie różnych wzorów.

Teraz konfigurujemy każdy element tak, aby:

1. Pierwszy element musi wziąć dwie kolumny i zacząć od kolumny pierwszej (grid-column: 1/span 2).
2. Drugi element jest umieszczony w trzeciej kolumnie (grid-column-start: 3).
3. Trzeci element jest umieszczony w pierwszej kolumnie: (grid-column-start: 1).
4. Czwarty element zajmuje dwie kolumny i zaczyna się od drugiej kolumny: (grid-column: 2/span 2).

Tutaj to jest w CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Moglibyśmy się tu zatrzymać i skończyć… ale możemy zrobić lepiej! W szczególności możemy usunąć niektóre deklaracje i polegać na uprawnieniach sieci do automatycznego umieszczania, które wykonają za nas pracę. Jest to najtrudniejsza część do groka i wymaga dużo praktyki, aby móc zidentyfikować, co można usunąć.

Pierwszą rzeczą, jaką możemy zrobić, jest aktualizacja grid-column: 1 /span 2 i używaj tylko grid-column: span 2 ponieważ domyślnie przeglądarka umieści pierwszy element w pierwszej kolumnie. Możemy również usunąć to:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Umieszczając pierwszy, drugi i czwarty element, siatka automatycznie umieszcza trzeci element we właściwym miejscu. Oznacza to, że zostajemy z tym:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Ale chodź, możemy spacerować lepiej! Możemy również usunąć to:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Czemu? Jeśli umieścimy czwarty element w drugiej kolumnie, jednocześnie pozwalając mu zająć dwie pełne kolumny, zmuszamy siatkę do utworzenia trzeciej niejawnej kolumny, dając nam w sumie trzy kolumny bez wyraźnego nakazu. Czwarty element nie może wejść do pierwszego wiersza, ponieważ pierwszy element również zajmuje dwie kolumny, więc przechodzi do następnego wiersza. Ta konfiguracja pozostawia nam pustą kolumnę w pierwszym wierszu i pustą w drugim wierszu.

Myślę, że znasz koniec historii. Przeglądarka automatycznie umieści drugi i trzeci element w tych pustych miejscach. Więc nasz kod staje się jeszcze prostszy:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Wystarczy pięć deklaracji, aby stworzyć bardzo fajny i bardzo elastyczny wzór. Część dotycząca optymalizacji może być trudna, ale przyzwyczaisz się do tego i zdobędziesz kilka sztuczek z praktyką.

Dlaczego nie użyć? grid-template-columns zdefiniować jawne kolumny, ponieważ znamy liczbę kolumn?

Możemy to zrobić! Oto kod na to:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Jak widać kod jest zdecydowanie bardziej intuicyjny. Definiujemy trzy wyraźne kolumny siatki i mówimy przeglądarce, że pierwszy i czwarty element muszą zająć dwie kolumny. Gorąco polecam to podejście! Ale celem tego artykułu jest zbadanie nowych pomysłów i sztuczek, które otrzymujemy dzięki niejawnym i automatycznym możliwościom CSS Grid.

Wyraźne podejście jest prostsze, podczas gdy niejawna siatka wymaga od ciebie — wybacz tę grę słów — wypełnienia luk, w których CSS wykonuje dodatkową pracę za kulisami. W końcu wierzę, że solidne zrozumienie siatek niejawnych pomoże ci lepiej zrozumieć algorytm CSS Grid. W końcu nie jesteśmy tu, by badać to, co oczywiste — jesteśmy tu, by odkrywać dzikie terytoria!

Wypróbujmy inny wzór, tym razem nieco szybszy:

Nasz wzór powtarza się co sześć elementów. Każdy trzeci i czwarty element musi zajmować dwa pełne rzędy. Jeśli umieścimy trzeci i czwarty element, wydaje się, że nie musimy dotykać pozostałych, więc spróbujmy wykonać następujące czynności:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hmm, nie dobrze. W pierwszej kolumnie musimy umieścić drugi element. W przeciwnym razie siatka automatycznie umieści ją w drugiej kolumnie.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Lepiej, ale jest jeszcze więcej pracy, musimy przesunąć trzeci element do góry. Kuszące jest umieszczenie go w pierwszym rzędzie w ten sposób:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Ale to nie działa, ponieważ wymusza wszystkie 6n + 3 elementy do umieszczenia w tym samym obszarze, co tworzy pomieszany układ. Prawdziwym rozwiązaniem jest zachowanie początkowej definicji trzeciego elementu i dodanie grid-auto-flow: dense wypełnić luki. Z MDN:

[The] „gęsty” algorytm pakowania próbuje wypełnić w otworach wcześniej w siatce, jeśli później pojawią się mniejsze elementy. Może to spowodować, że przedmioty będą wyglądać niewłaściwie, ponieważ spowoduje to wypełnienie dziur pozostawionych przez większe przedmioty. Jeśli zostanie pominięty, używany jest algorytm „rzadki”, w którym algorytm umieszczania przesuwa się tylko „do przodu” w siatce podczas umieszczania przedmiotów, nigdy nie cofa się, aby wypełnić dziury. Gwarantuje to, że wszystkie automatycznie umieszczone elementy pojawią się „w kolejności”, nawet jeśli pozostawi to dziury, które mogły zostać wypełnione przez późniejsze przedmioty.

Wiem, że ta właściwość nie jest zbyt intuicyjna, ale nigdy nie zapominaj o niej, gdy napotkasz problem z umieszczeniem. Zanim spróbujesz różnych konfiguracji na próżno, dodaj go, ponieważ może naprawić układ bez dodatkowego wysiłku.

Dlaczego nie zawsze dodawać tę właściwość domyślnie?

Nie polecam tego, ponieważ w niektórych przypadkach nie chcemy takiego zachowania. Zwróć uwagę, że wyjaśnienie MDN wspomina, że ​​powoduje to, że przedmioty przepływają „niew porządku”, aby wypełnić dziury pozostawione przez większe przedmioty. Porządek wizualny jest zwykle tak samo ważny jak porządek źródłowy, szczególnie jeśli chodzi o dostępne interfejsy, oraz grid-auto-flow: dense może czasami powodować niezgodność między porządkiem wizualnym i źródłowym.

Nasz ostateczny kod to wtedy:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Inny? Chodźmy!

W tym przypadku nie będę mówił zbyt wiele, a zamiast tego pokażę ilustrację kodu, którego użyłem. Spróbuj sprawdzić, czy wiesz, w jaki sposób dotarłem do tego kodu:

Elementy w kolorze czarnym są domyślnie umieszczane w siatce. Należy zauważyć, że ten sam układ możemy uzyskać na więcej sposobów, niż to, w jaki się tam dostałem. Czy potrafisz je też rozgryźć? A co z używaniem grid-template-columns? Podziel się swoimi pracami w sekcji komentarzy.

Zostawię cię z ostatnim wzorem:

Ja mieć rozwiązanie dla tego, ale teraz twoja kolej na praktykę. Weź wszystko, czego się nauczyliśmy i spróbuj sam to zakodować, a następnie porównaj z moim rozwiązaniem. Nie martw się, jeśli skończysz z czymś gadatliwym — najważniejszą rzeczą jest znalezienie działającego rozwiązania.

Chcieć więcej?

Zanim skończymy, chcę podzielić się kilkoma pytaniami z przepełnienia stosu związanymi z CSS Grid, gdzie wskoczyłem z odpowiedziami, które wykorzystują wiele technik, które omówiliśmy tutaj razem. To dobra lista, która pokazuje, ile rzeczywistych przypadków użycia i rzeczywistych sytuacji pojawia się, w których te rzeczy są przydatne:

Zamykając

CSS Grid istnieje od lat, ale wciąż istnieje wiele mało znanych i używanych sztuczek, które nie są szeroko omawiane. Niejawna siatka i funkcje automatycznego umieszczania to dwa z nich!

I tak, to może być trudne! Dużo czasu zajęło mi zapoznanie się z logiką ukrytych siatek i nadal mam problemy z automatycznym umieszczaniem. Jeśli chcesz spędzić więcej czasu na owijaniu głowy wokół wyraźnych i ukrytych siatek, oto kilka dodatkowych wyjaśnień i przykładów, które warto sprawdzić:

Podobnie możesz chcieć przeczytać o grid-auto-columns w CSS-Tricks Almanac, ponieważ Mojtaba Seyedi podaje bardzo szczegółowe informacje i zawiera niezwykle pomocne wizualizacje, które pomagają wyjaśnić zachowanie.

Jak powiedziałem, kiedy zaczynaliśmy, metody, które tutaj omówiliśmy, nie mają na celu zastąpienia popularnych sposobów budowania siatek, które już znasz. Po prostu badam różne sposoby, które mogą być pomocne w niektórych przypadkach.