A CSS Grid implicit rácsának és az automatikus elhelyezési képességeinek felfedezése

Ha a CSS Griddel dolgozik, az első lépés a beállítás display: grid azon az elemen, hogy szeretnénk, ha rácskonténerré válnánk. Ezután explicit módon definiáljuk a rácsot a kombinációk használatával grid-template-columns, grid-template-rowsés grid-template-areas. Innentől kezdve a következő lépés az elemek elhelyezése a rácson belül.

Ezt a klasszikus megközelítést kell alkalmazni, és én is ezt javaslom. Van azonban egy másik megközelítés is a rácsok létrehozására kifejezett definíció nélkül. Ezt hívjuk a implicit rács.

„Explicit, implicit? Mi a fene folyik itt?"

Furcsa kifejezések, igaz? Manuel Matuzovic már több mint jó magyarázat mit lehet „implicit” és „explicit” kifejezéssel a CSS Gridben, de nézzük meg, mit a specification mondja:

A grid-template-rows, grid-template-columnsés grid-template-areas A tulajdonságok meghatározott számú sávot határoznak meg az explicit rács. Ha a rácselemek ezeken a határokon kívül helyezkednek el, a rácstároló implicit rácsvonalakat hoz létre implicit rácsvonalak rácshoz való hozzáadásával. Ezek a vonalak az explicit ráccsal együtt alkotnak az implicit rács.

Tehát egyszerű magyar nyelven a böngésző automatikusan extra sorokat és oszlopokat generál arra az esetre, ha bármely elem a meghatározott rácson kívülre kerülne.

Mi a helyzet az automatikus elhelyezéssel?

Hasonlóan az implicit rács fogalmához, automatikus elhelyezés a böngésző azon képessége, hogy automatikusan elhelyezze az elemeket a rácson belül. Nem kell mindig megadnunk az egyes tételek pozícióját.

Különböző felhasználási eseteken keresztül meg fogjuk látni, hogy ezek a funkciók hogyan segíthetnek összetett és dinamikus rács létrehozásában néhány soros kóddal.

Dinamikus oldalsáv

Itt három különböző elrendezés van, de csak egy rácskonfigurációnk van, amely mindegyikhez működik.

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

Csak egy oszlop foglalja el az összes szabad helyet. Ez a mi „explicit” rácsunk. Úgy van beállítva, hogy egy rácselemet elférjen a main rács konténer. Ez minden. Egy oszlop és egy sor:

De mi van, ha úgy döntünk, hogy egy másik elemet is bedobunk, mondjuk egy aside (dinamikus oldalsávunk). A jelenlegi (és kifejezetten) definíció szerint a rácsunknak automatikusan be kell igazodnia, hogy helyet találjon az elem számára. És ha nem teszünk mást a CSS-ünkkel, akkor a DevTools szerint ez történik.

Mozgathatjuk a <aside> melletti oszlophoz <section>:

aside {
  grid-column-start: 2;
}

És a DevTools most elmondja nekünk:

Az elemünket a második oszlopba helyezzük, de… nincs második oszlopunk. Furcsa, igaz? Soha nem nyilvánítottunk második oszlopot a <main> grid konténer, de a böngésző készített nekünk egyet! Ez az általunk vizsgált specifikáció kulcsa:

Ha a rácselemek ezeken a határokon kívül helyezkednek el, a rácstároló implicit rácsvonalakat hoz létre implicit rácsvonalak rácshoz való hozzáadásával.

Ez a hatékony funkció lehetővé teszi számunkra, hogy dinamikus elrendezéseket készítsünk. Ha csak a <section> elemet, csak egy oszlopot kapunk. De ha hozzáadunk egy <aside> elemet a keverékhez, akkor egy extra oszlop jön létre annak tárolására.

Elhelyezhetnénk a <aside> előtte <section> helyette így:

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

Ez az implicit oszlopot a rács elején hozza létre, ellentétben az előző kóddal, amely az implicit oszlopot a végére helyezi.

Ugyanezt könnyebben megtehetjük a grid-auto-flow tulajdonság bármely implicit sáv áramlásának beállításához a column irány:

Most már nem kell megadni grid-column-start elhelyezni a <aside> elemtől jobbra <section>! Valójában minden más rácselem, amelyet bármikor bedobunk, most oszlopirányban fog folyni, mindegyik a saját implicit rácssávjába helyezve. Tökéletes olyan helyzetekben, amikor a rács elemeinek száma nem ismert előre!

Ennek ellenére szükségünk van rá grid-column-end ha egy tőle balra lévő oszlopba akarjuk elhelyezni, mert egyébként a <aside> az explicit oszlopot fogja elfoglalni, ami viszont tolja a <section> az explicit rácson kívül, és arra kényszeríti, hogy az implicit oszlopot vegye fel.

Tudom, tudom. Ez egy kicsit bonyolult. Íme egy másik példa, amellyel jobban megérthetjük ezt a kis furcsaságot:

Az első példában nem adtunk meg elhelyezést. Ebben az esetben a böngésző először a <aside> elemet az explicit oszlopban, mivel ez az első a DOM-ban. Az <section>, eközben automatikusan a rács oszlopba kerül, amelyet a böngésző automatikusan (vagy implicit módon) hoz létre számunkra.

A második példában beállítjuk a <aside> elem az explicit rácson kívül:

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

Most már ez nem számít <aside> első helyen áll a HTML-ben. Újra hozzárendeléssel <aside> valahol máshol elkészítettük a <section> elem elérhető az explicit oszlop felvételéhez.

Képrács

Próbáljunk ki valami mást egy olyan képrács segítségével, ahol van egy nagy kép és néhány miniatűr mellette (vagy alatta).

Két hálózati konfigurációnk van. De képzeld csak? Egyáltalán nem definiálok rácsot! Csak ezt csinálom:

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

Meglepő, hogy csak egy kódsorra van szükségünk ahhoz, hogy valami ilyesmit lehessen hozni, szóval boncolgassuk, mi történik, és látni fogod, hogy könnyebb, mint gondolnád. Először is, grid-area egy rövidített tulajdonság, amely a következő tulajdonságokat egyesíti egyetlen deklarációban:

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

Várjon! Nem grid-area az általunk definiált tulajdonság elnevezett területek ahelyett, hogy az elemek hol kezdődnek és végződnek a rácson?

Igen, de többre is képes. Sokkal többet írhatnánk róla grid-area, de ebben a konkrét esetben:

.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;
}

Ugyanezt láthatjuk, amikor feltörjük a DevTools megnyitását a gyorsított verzió kiterjesztéséhez:

Ez azt jelenti, hogy a rács első képelemének át kell terjednie három oszlop és a három sor. De mivel nem határoztunk meg oszlopokat vagy sorokat, a böngésző megteszi helyettünk.

Lényegében elhelyeztük az első képet a HTML-ben, hogy egy 3⨉3-as rácsot foglaljon el. Ez azt jelenti, hogy a többi kép automatikusan ugyanabba a három oszlopba kerül, anélkül, hogy bármi újat kellene megadni.

Összefoglalva elmondtuk a böngészőnek, hogy az első képnek három oszlopból és három sorból álló helyet kell elfoglalnia, amelyeket soha nem határoztunk meg kifejezetten a rácstároló beállításakor. A böngésző beállította nekünk ezeket az oszlopokat és sorokat. Ennek eredményeként a HTML-ben lévő többi kép ugyanazzal a három oszloppal és sorral a helyére kerül. És mivel az első kép az első sor mindhárom oszlopát foglalja el, a fennmaradó képek további sorokba folynak, amelyek mindegyike három oszlopot tartalmaz, ahol minden kép egyetlen oszlopot foglal el.

Mindez a CSS egyetlen sorából! Ez az „implicit” rács és az automatikus elhelyezés ereje.

A demó második rácskonfigurációjánál mindössze annyit tettem, hogy megváltoztattam az automatikus áramlási irányt a segítségével grid-auto-flow: column ugyanúgy, ahogy korábban tettük egy <aside> elem mellett a <section>. Ez arra kényszeríti a böngészőt, hogy a negyedik oszlopot használhatja a fennmaradó képek elhelyezésére. És mivel három sorunk van, a többi kép ugyanabba a függőleges oszlopba kerül.

Hozzá kell adnunk néhány tulajdonságot a képekhez, hogy minden túlcsordulás nélkül szépen illeszkedjenek a rácsba:

.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;
}

És természetesen egy érték módosításával egyszerűen frissíthetjük a rácsot, hogy több képet vegyen figyelembe. Ez lenne a 3 a stílusokban a nagy képhez. Nálunk ez van:

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

De hozzáadhatnánk egy negyedik oszlopot is, ha egyszerűen megváltoztatjuk 4 helyette:

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

Még jobb: állítsuk be ezt egyéni tulajdonságként, hogy még könnyebben frissíthető legyen.

Dinamikus elrendezések

Az oldalsáv első használati esete az első dinamikus elrendezésünk volt. Most bonyolultabb elrendezésekkel fogunk foglalkozni, ahol az elemek száma határozza meg a rács konfigurációját.

Ebben a példában egy-négy olyan elemet használhatunk, ahol a rács úgy igazodik, hogy szépen illeszkedjen az elemek számához anélkül, hogy kínos hézagokat vagy hiányzó helyeket hagyna.

Ha van egy elemünk, nem teszünk semmit. Az elem megnyúlik, hogy kitöltse a rács által automatikusan létrehozott egyetlen sort és oszlopot.

Bit, amikor hozzáadjuk a második elemet, egy másik (implicit) oszlopot hozunk létre a használatával grid-column-start: 2.

Amikor hozzáadunk egy harmadik elemet, annak két oszlop szélességét kell elfoglalnia – ezért használtuk grid-column-start: span 2, de csak akkor, ha az :last-child mert ha (és mikor) hozzáadunk egy negyedik elemet, az csak egyetlen oszlopot foglalhat el.

Ha ezt összeadjuk, megvan négy rácskonfiguráció csak két nyilatkozat és az implicit rács varázsa:

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

Próbáljunk ki egy másikat:

Nem teszünk semmit az első és a második esetben, amikor csak egy vagy két elemünk van. Amikor azonban hozzáadunk egy harmadik elemet, azt mondjuk a böngészőnek – mindaddig, amíg ez a :last-child — két oszlopot kell átfognia. Amikor hozzáadunk egy negyedik elemet, közöljük a böngészővel, hogy az elemet a második oszlopba kell helyezni.

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

Kezded érteni a trükköt? A böngészőnek konkrét utasításokat adunk az elemek száma alapján (a :nth-child), és néha egy utasítás teljesen megváltoztathatja az elrendezést.

Megjegyzendő, hogy a méretezés nem lesz azonos, ha különböző tartalommal dolgozunk:

Mivel a tételeinkhez nem határoztunk meg méretet, a böngésző automatikusan méretre állítja azokat a tartalmuk alapján, és előfordulhat, hogy más méretet kapunk, mint amit most láttunk. Ahhoz, hogy ezt leküzdjük, muszáj kifejezetten adja meg, hogy minden oszlop és sor egyenlő méretű legyen:

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

Hé, ezekkel a tulajdonságokkal még nem játszottunk! grid-auto-rows és a grid-auto-columns állítsa be az implicit sorok és oszlopok méretét egy rácstárolóban. Vagy mint a spec elmagyarázza:

A grid-auto-columns és a grid-auto-rows A tulajdonságok meghatározzák a mérethez nem rendelt sávok méretét grid-template-rows or grid-template-columns.

Íme egy másik példa, ahol akár hat elemet is elérhetünk. Ezúttal hagyom, hogy boncolgassa a kódot. Ne aggódjon, a kiválasztók bonyolultnak tűnhetnek, de a logika meglehetősen egyszerű.

Hat elem mellett is csak két nyilatkozatra volt szükségünk. Képzelje el az összes összetett és dinamikus elrendezést, amelyet néhány soros kóddal elérhetünk!

Mi történik ezzel grid-auto-rows és miért kell ehhez három érték? Három sort határozunk meg?

Nem, nem határozunk meg három sort. De mi faliórái három értéket definiálunk implicit soraink mintájaként. A logika a következő:

• Ha van egy sorunk, akkor az az első értékkel lesz méretezve.
• Ha két sorunk van, akkor az első az első, a második pedig a második értéket kapja.
• Ha három sorunk van, akkor a három érték használatos.
• Ha négy sorunk van (és itt jön az érdekes rész), akkor az első három sorban a három értéket használjuk, és újra az első értéket a negyedik sorban. Ezért ez egyfajta minta, amelyet megismételünk az összes implicit sor méretéhez.
• Ha 100 sorunk van, akkor azok háromszor háromra lesznek méretezve 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1frStb

Eltérően grid-template-rows amely meghatározza a sorok számát és méretét, grid-auto-rows csak a méretsor, amely az út során jöhet létre.

Ha visszatérünk a példánkhoz, akkor a logika az, hogy két sor létrehozásakor egyenlő méretű legyen (a 2fr 2fr), de ha létrehozunk egy harmadik sort, azt egy kicsit kicsinyítjük.

Rácsminták

Ez utóbbi esetében a mintákról fogunk beszélni. Valószínűleg látta már azt a két oszlopelrendezést, ahol az egyik oszlop szélesebb, mint a másik, és minden sor váltakozik ezen oszlopok elhelyezésekor.

Ez a rendezési elrendezés nehézkes lehet anélkül, hogy pontosan tudnánk, hogy mennyi tartalommal van dolgunk, de a CSS Grid implicit automatikus elhelyezési képességei viszonylag egyszerűvé teszik.

Vessen egy pillantást a kódra. Lehet, hogy bonyolultnak tűnik, de bontsuk le, mert a végeredmény meglehetősen egyszerű.

Az első dolog a minta azonosítása. Tedd fel magadnak a kérdést: „Hány elem után kell a mintának megismétlődnie?” Ebben az esetben minden négy elem után. Nézzük tehát, hogy most csak négy elemet használjunk:

Most határozzuk meg a rácsot, és állítsuk be az általános mintát a segítségével :nth-child választó az elemek váltakozásához:

.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) { /* ?? */ }

Azt mondtuk, hogy a mintánk négy elemenként ismétlődik, ezért logikusan használjuk 4n + x ahol x 1-től 4-ig terjed. Kicsit egyszerűbb így elmagyarázni a mintát:

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.

Tökéletes, igaz? Négy elemünk van, és ismételjük meg a mintát az ötödik elemen, a kilencedik elemen és így tovább.

Azok :nth-child a válogatók trükkösek lehetnek! Chrisnek nagyon segítőkész magyarázatot, hogyan működik mindez, beleértve receptek különböző minták létrehozásához.

Most minden elemet úgy konfigurálunk, hogy:

1. Az első elemnek két oszlopot kell foglalnia, és az első oszloptól kell kezdődnie (grid-column: 1/span 2).
2. A második elem a harmadik oszlopba kerül (grid-column-start: 3).
3. A harmadik elem az első oszlopba kerül: (grid-column-start: 1).
4. A negyedik elem két oszlopból áll, és a második oszloppal kezdődik: (grid-column: 2/span 2).

Itt van CSS-ben:

.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; }

Megállhatnánk itt és végezhetnénk… de tehetünk jobbat is! Pontosabban, eltávolíthatunk néhány deklarációt, és a grid automatikus elhelyezési képességeire hagyatkozhatunk, hogy elvégezzék a munkát helyettünk. Ez a grokolás legbonyolultabb része, és sok gyakorlást igényel, hogy felismerjük, mit lehet eltávolítani.

Az első dolog, amit tehetünk, a frissítés grid-column: 1 /span 2 és csak használja grid-column: span 2 mivel alapértelmezés szerint a böngésző az első elemet az első oszlopba helyezi. Ezt is eltávolíthatjuk:

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

Az első, második és negyedik elem elhelyezésével a rács automatikusan a megfelelő helyre helyezi a harmadik elemet. Ez azt jelenti, hogy ez maradt:

.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; }

De gyerünk, sétálhatunk jobban is! Ezt is eltávolíthatjuk:

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

Miért? Ha a negyedik elemet a második oszlopba helyezzük, miközben hagyjuk, hogy két teljes oszlopot foglaljon el, akkor arra kényszerítjük a rácsot, hogy hozzon létre egy harmadik implicit oszlopot, így összesen három oszlopot kapunk anélkül, hogy ezt kifejezetten megmondanánk. A negyedik elem nem kerülhet az első sorba, mivel az első elem is két oszlopot vesz fel, így a következő sorba folyik. Ez a konfiguráció egy üres oszlopot hagy az első sorban és egy üreset a második sorban.

Szerintem tudod a történet végét. A böngésző automatikusan ezekre az üres helyekre helyezi a második és harmadik elemet. Így a kódunk még egyszerűbb lesz:

.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; }

Mindössze öt deklaráció kell egy nagyon klassz és nagyon rugalmas minta létrehozásához. Az optimalizálási rész trükkös lehet, de meg lehet szokni, és gyakorlással trükkökre tesz szert.

Miért nem használja grid-template-columns explicit oszlopok meghatározásához, mivel ismerjük az oszlopok számát?

Meg tudjuk csinálni! Íme a kód hozzá:

.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;
}

Mint látható, a kód határozottan intuitívabb. Három explicit rácsoszlopot határozunk meg, és közöljük a böngészővel, hogy az első és a negyedik elemnek két oszlopot kell foglalnia. Nagyon ajánlom ezt a megközelítést! Ennek a cikknek azonban az a célja, hogy feltárjon új ötleteket és trükköket, amelyeket a CSS Grid implicit és automatikus elhelyezési képességeiből nyerünk.

Az explicit megközelítés egyszerűbb, míg az implicit rács megköveteli – elnézést a szójátékért –, hogy kitöltse azokat a hiányosságokat, ahol a CSS további munkát végez a színfalak mögött. Végül úgy gondolom, hogy az implicit rácsok alapos ismerete segít jobban megérteni a CSS Grid algoritmust. Végül is nem azért vagyunk itt, hogy azt tanulmányozzuk, ami nyilvánvaló, hanem azért, hogy felfedezzük a vadon élő területeket!

Próbáljunk ki egy másik mintát, ezúttal kicsit gyorsabban:

A mintánk hat elemenként ismétlődik. A harmadik és a negyedik elemnek két teljes sort kell elfoglalnia. Ha a harmadik és a negyedik elemet elhelyezzük, úgy tűnik, hogy a többihez nem kell hozzányúlnunk, próbáljuk meg a következőket:

.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, nem jó. A második elemet az első oszlopba kell helyeznünk. Ellenkező esetben a rács automatikusan a második oszlopba helyezi.

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

Jobb, de még mindig több munka van. A harmadik elemet a tetejére kell tolnunk. Csábító, hogy megpróbálja az első sorba helyezni a következő módon:

.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 
     */
}

De ez nem működik, mert kényszerít mindenre 6n + 3 az elemek ugyanarra a területre kerüljenek, ami zavaros elrendezést eredményez. Az igazi megoldás az, hogy megtartjuk a harmadik elem kezdeti definícióját, és hozzáadjuk grid-auto-flow: dense hogy kitöltse a hiányokat. Az MDN-től:

[A] „sűrű” csomagolási algoritmus megpróbálja kitölteni a rács korábbi lyukaiban, ha később kisebb tételek kerülnek elő. Ez azt eredményezheti, hogy a tételek rendellenesnek tűnnek, ha ez kitölti a nagyobb tételek által hagyott lyukakat. Ha kihagyjuk, akkor egy „ritka” algoritmust használunk, ahol az elhelyezési algoritmus mindig csak „előre” mozog a rácsban, amikor elemeket helyez el, soha nem lép vissza a lyukak kitöltéséhez. Ez biztosítja, hogy az összes automatikusan elhelyezett elem „sorrendben” jelenjen meg, még akkor is, ha ez olyan lyukakat hagy maga után, amelyeket későbbi tételek kitölthettek volna.

Tudom, hogy ez a tulajdonság nem túl intuitív, de soha ne felejtse el, ha elhelyezési problémával szembesül. Mielőtt hiába próbálkozna különböző konfigurációkkal, adja hozzá, mert további erőfeszítés nélkül javíthatja az elrendezést.

Miért nem adja hozzá ezt a tulajdonságot mindig alapértelmezés szerint?

Nem ajánlom, mert bizonyos esetekben nem akarjuk ezt a viselkedést. Figyeld meg, hogy az MDN ottani magyarázata megemlíti, hogy az elemek „rendellenesen” áramlanak, hogy kitöltsék a nagyobb tételek által hagyott lyukakat. A vizuális sorrend általában ugyanolyan fontos, mint a forrás sorrendje, különösen, ha az elérhető felületekről van szó, és grid-auto-flow: dense néha eltérést okozhat a vizuális és a forrás sorrendje között.

A végső kódunk a következő:

.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; }

Másik? Gyerünk!

Ezzel kapcsolatban nem fogok túl sokat beszélni, hanem megmutatom az általam használt kód illusztrációját. Próbáld meg megnézni, hogy megérted-e, hogyan jutottam el ehhez a kódhoz:

A fekete színű elemek implicit módon a rácsba kerülnek. Meg kell jegyezni, hogy ugyanazt az elrendezést több módon is megkaphatjuk, mint ahogy én eljutottam oda. Ezeket is kitalálod? Mi a helyzet a használatával grid-template-columns? Oszd meg munkáidat a megjegyzés rovatban.

Meghagyok egy utolsó mintát:

Én van megoldása erre, de rajtad a sor a gyakorláson. Fogadd el mindazt, amit tanultunk, és próbáld meg ezt egyedül kódolni, majd hasonlítsd össze az én megoldásommal. Ne aggódjon, ha valami bőbeszéddel fejezi be – a legfontosabb az, hogy működő megoldást találjunk.

Többet akar?

Mielőtt befejeznénk, szeretnék megosztani néhány, a CSS Griddel kapcsolatos Stack Overflow kérdést, amelyekre beugrottam a válaszokkal, amelyek számos technikát használnak, amelyeket itt együtt tárgyaltunk. Ez egy jó lista, amely megmutatja, hány valós használati eset és valós helyzet jön elő, amikor ezek a dolgok jól jöhetnek:

Csomagolta

A CSS Grid évek óta létezik, de még mindig sok kevéssé ismert és használt trükk van, amelyekről nem esik szó. Az implicit rács és az automatikus elhelyezési funkciók ezek közül kettő!

És igen, ez kihívást jelenthet! Sok időbe telt, míg rátaláltam az implicit rácsok mögötti logikára, és még mindig küzdök az automatikus elhelyezéssel. Ha több időt szeretne eltölteni explicit és implicit rácsok körül, itt van néhány további magyarázat és példa, amelyeket érdemes megnézni:

Hasonlóképpen érdemes elolvasni grid-auto-columns a CSS-Tricks Almanachban, mert Mojtaba Seyedi nagyon részletesen foglalkozik, és hihetetlenül hasznos látványelemeket tartalmaz a viselkedés magyarázatához.

Ahogy induláskor mondtam, az itt tárgyalt módszerek nem helyettesítik a rácsok építésére már ismert általános módszereket. Egyszerűen különféle módokat vizsgálok, amelyek bizonyos esetekben hasznosak lehetnek.