CSS-võrgu kaudse ruudustiku ja automaatse paigutuse võimaluste uurimine

CSS Gridiga töötades tuleb esimese asjana seadistada display: grid elemendil, millest me tahame saada ruudustiku konteiner. Seejärel määratleme ruudustiku selgesõnaliselt, kasutades kombinatsiooni grid-template-columns, grid-template-rowsja grid-template-areas. Ja sealt edasi on järgmine samm elementide paigutamine ruudustiku sisse.

See on klassikaline lähenemine, mida tuleks kasutada ja ma soovitan seda ka. Võrkude loomiseks on aga veel üks lähenemisviis ilma ühegi selgesõnalise määratluseta. Me nimetame seda kaudne võrk.

„Eksplitsiitne, kaudne? Mis kurat siin toimub?"

Kummalised terminid, eks? Manuel Matuzovic juba on hea seletus sellest, mida me CSS-võrgustikus "kaudne" ja "selgesõnaline" võime öelda, kuid uurime otse, mida the,en specifikatsioon ütleb:

. grid-template-rows, grid-template-columnsja grid-template-areas atribuudid määratlevad fikseeritud arvu moodustatavaid lugusid selgesõnaline ruudustik. Kui ruudustiku üksused paiknevad väljaspool neid piire, genereerib ruudustiku konteiner kaudsed ruudustikurajad, lisades ruudustikule kaudsed ruudustiku read. Need read koos selgesõnalise ruudustikuga moodustavad kaudne võrk.

Nii et lihtsas inglise keeles genereerib brauser automaatselt täiendavad read ja veerud juhuks, kui mõni element peaks asetsema määratletud ruudustikust väljapoole.

Aga automaatne paigutus?

Sarnaselt kaudse võrgu kontseptsiooniga, automaatne paigutus on brauseri võimalus paigutada üksused automaatselt ruudustiku sisse. Me ei pea alati andma iga üksuse asukohta.

Erinevate kasutusjuhtude kaudu näeme, kuidas sellised funktsioonid aitavad meil mõne koodireaga keerukat ja dünaamilist võrgustikku luua.

Dünaamiline külgriba

Siin on meil kolm erinevat paigutust, kuid meil on ainult üks võrgukonfiguratsioon, mis töötab nende kõigi jaoks.

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

Ainult üks veerg võtab kogu vaba ruumi. See on meie "selgesõnaline" ruudustik. See on seadistatud mahutama ühte ruudustiku elementi main võre konteiner. See on kõik. Üks veerg ja üks rida:

Aga mis siis, kui otsustaksime sinna lisada veel ühe elemendi, näiteks an aside (meie dünaamiline külgriba). Nagu see praegu (ja selgesõnaliselt) määratletud, peab meie ruudustik selle elemendi jaoks koha leidmiseks automaatselt kohanduma. Ja kui me oma CSS-iga midagi muud ei tee, siis DevTools ütleb, et see juhtub järgmiselt.

Me saame liigutada <aside> kõrval asuvasse veergu <section>:

aside {
  grid-column-start: 2;
}

Ja siin on see, mida DevTools meile nüüd ütleb:

Asetame oma elemendi teise veergu, kuid… meil pole teist veergu. Imelik, eks? Me pole kunagi deklareerinud teist veergu <main> grid konteiner, kuid brauser lõi selle meie jaoks! See on peamine osa spetsifikatsioonist, mida vaatasime:

Kui ruudustiku üksused paiknevad väljaspool neid piire, genereerib ruudustiku konteiner kaudsed ruudustikurajad, lisades ruudustikule kaudsed ruudustiku read.

See võimas funktsioon võimaldab meil kasutada dünaamilisi paigutusi. Kui meil on ainult <section> element, saame ainult ühe veeru. Aga kui lisame an <aside> element segule, luuakse selle sisaldamiseks lisaveerg.

Võiksime paigutada <aside> enne <section> hoopis nii:

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

See loob kaudse veeru ruudustiku algusesse, erinevalt eelmisest koodist, mis asetab kaudse veeru lõppu.

Saame sama asja lihtsamini teha kasutades grid-auto-flow atribuut, et määrata mis tahes ja kõik kaudsed rajad voolama a-s column suund:

Nüüd pole vaja täpsustada grid-column-start paigutada <aside> element paremal <section>! Tegelikult voolavad kõik teised ruudustikuüksused, mille me otsustame sinna igal ajal visata, nüüd veeru suunas, igaüks paigutatud oma kaudsetele ruudustiku radadele. Ideaalne olukordades, kus üksuste arv ruudustikus pole ette teada!

Nagu öeldud, vajame ikka veel grid-column-end kui tahame selle paigutada sellest vasakul olevasse veergu, sest vastasel juhul <aside> hõivab selgesõnalise veeru, mis omakorda surub <section> väljaspool eksplitsiitset võrku ja sunnib seda võtma kaudset veergu.

Ma tean, ma tean. See on natuke segane. Siin on veel üks näide, mida saame kasutada selle väikese veidruse paremaks mõistmiseks:

Esimeses näites me ei määranud ühtegi paigutust. Sel juhul asetab brauser esmalt <aside> element selgesõnalises veerus, kuna see on DOM-is esimene. The <section>Vahepeal paigutatakse automaatselt ruudustiku veergu, mille brauser meie jaoks automaatselt (või kaudselt) loob.

Teises näites määrame <aside> element väljaspool selgesõnalist ruudustikku:

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

Nüüd pole sellel vahet <aside> on HTML-is esikohal. Ümbermääramisega <aside> kusagil mujal oleme teinud <section> selgesõnalise veeru võtmiseks saadaval element.

Pildiruudustik

Proovime midagi muud piltide ruudustikuga, kus meil on suur pilt ja selle kõrval (või selle all) mõned pisipildid.

Meil on kaks võrgukonfiguratsiooni. Aga arvake ära, mida? Ma ei määratle üldse ühtegi ruudustikku! Kõik, mida ma teen, on see:

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

On üllatav, et meil on vaja ainult ühte koodirida, et midagi sellist välja tõmmata, nii et lahkame, mis toimub, ja näete, et see on lihtsam, kui arvate. Esiteks, grid-area on stenogramm, mis ühendab järgmised omadused üheks deklaratsiooniks:

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

Oota! Kas pole grid-area omadus, mida me defineerimiseks kasutame nimega alad selle asemel, kus elemendid ruudustikus algavad ja lõpevad?

Jah, aga see teeb ka rohkem. Me võiksime sellest palju rohkem kirjutada grid-area, kuid sel konkreetsel juhul:

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

Sama näeme ka DevToolsi lahtimurdmisel stenogrammi laiendamiseks:

See tähendab, et ruudustiku esimene pildielement peab ulatuma kolm veergu ja kolm rida. Kuid kuna me ei määratlenud ühtegi veergu ega rida, teeb seda meie eest brauser.

Oleme sisuliselt paigutanud esimese pildi HTML-i, et see moodustaks 3⨉3 ruudustiku. See tähendab, et kõik muud pildid paigutatakse automaatselt samasse kolme veergu, ilma et oleks vaja midagi uut määrata.

Kokkuvõtteks ütlesime brauserile, et esimene pilt vajab ruumi kolmest veerust ja kolmest reast, mida me ruudustiku konteineri seadistamisel kunagi selgesõnaliselt ei määratlenud. Brauser seadis need veerud ja read meie eest üles. Tulemusena, ülejäänud pildid HTML-is voolavad täpselt oma kohale, kasutades samu kolme veergu ja rida. Ja kuna esimene pilt võtab enda alla kõik esimeses reas olevad kolm veergu, voolavad ülejäänud pildid täiendavateks ridadeks, millest igaüks sisaldab kolme veergu, kus iga pilt võtab enda alla ühe veeru.

Kõik see ühest CSS-i reast! See on "kaudse" ruudustiku ja automaatse paigutuse jõud.

Selle demo teise võrgukonfiguratsiooni puhul olen muutnud automaatset voolusuunda kasutades grid-auto-flow: column samamoodi, nagu me tegime varem an <aside> element a kõrval <section>. See sunnib brauserit looma a neljas veerus, mida saab kasutada ülejäänud piltide paigutamiseks. Ja kuna meil on kolm rida, paigutatakse ülejäänud pildid samasse vertikaalsesse veergu.

Peame piltidele lisama mõned atribuudid, et need sobiksid ilusti ruudustiku sisse ilma ülevooluta:

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

Ja loomulikult saame üht väärtust kohandades võrgustikku hõlpsalt värskendada, et kaaluda rohkem pilte. See oleks 3 suure pildi stiilides. Meil on see:

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

Kuid me võiksime lisada neljanda veeru lihtsalt muutes selle veeruks 4 selle asemel:

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

Veelgi parem: seadistame selle kohandatud atribuudiks, et asju oleks veelgi lihtsam värskendada.

Dünaamilised paigutused

Esimene külgriba kasutamise juhtum oli meie esimene dünaamiline paigutus. Nüüd käsitleme keerukamaid paigutusi, kus elementide arv määrab ruudustiku konfiguratsiooni.

Selles näites võib meil olla üks kuni neli elementi, kus ruudustik kohandub nii, et see sobiks kenasti elementide arvuga, jätmata ebamugavaid lünki või puuduvaid tühikuid.

Kui meil on üks element, ei tee me midagi. Element venib, et täita ainsa ruudustiku poolt automaatselt loodud rea ja veeru.

Teise elemendi lisamisel loome teise (kaudse) veeru kasutades grid-column-start: 2.

Kui lisame kolmanda elemendi, peaks see olema kahe veeru laiune – see on põhjus, miks me kasutasime grid-column-start: span 2, kuid ainult siis, kui see on :last-child sest kui (ja millal) lisame neljanda elemendi, peaks see võtma ainult ühe veeru.

Kui see kokku liita, on meil neli võrgukonfiguratsiooni ainult koos kaks deklaratsiooni ja kaudse ruudustiku võlu:

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

Proovime teist:

Me ei tee midagi esimesel ja teisel juhul, kui meil on ainult üks või kaks elementi. Kui lisame aga kolmanda elemendi, ütleme brauserile seda – seni, kuni see on :last-child — see peaks hõlmama kahte veergu. Kui lisame neljanda elemendi, ütleme brauserile, et element tuleb paigutada teise veergu.

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

Kas sa hakkad trikist aru saama? Anname brauserile konkreetsed juhised elementide arvu põhjal (kasutades :nth-child) ja mõnikord võib üks juhis paigutust täielikult muuta.

Tuleb märkida, et suurus ei ole sama, kui töötame erineva sisuga:

Kuna me ei määranud oma üksustele suurusi, määrab brauser nende suurused meie jaoks automaatselt nende sisu põhjal ja me võime saada teistsuguse suuruse kui see, mida just nägime. Sellest ülesaamiseks peame selgesõnaliselt täpsustage, et kõik veerud ja read on võrdse suurusega:

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

Hei, me pole veel nende omadustega mänginud! grid-auto-rows ja grid-auto-columns määrake ruudustiku konteineris vastavalt kaudsete ridade ja veergude suurus. Või nagu spetsifikatsioon selgitab seda:

. grid-auto-columns ja grid-auto-rows atribuudid määravad nende radade suuruse, millele ei ole määratud suurust grid-template-rows or grid-template-columns.

Siin on veel üks näide, kus saame minna kuni kuue elemendini. Seekord lasen koodi lahkama hakata. Ärge muretsege, valijad võivad tunduda keerulised, kuid loogika on üsna lihtne.

Isegi kuue elemendi puhul vajasime ainult kahte deklaratsiooni. Kujutage ette kõiki keerulisi ja dünaamilisi paigutusi, mida saame mõne koodirea abil saavutada!

Mis sellega toimub grid-auto-rows ja miks on vaja kolme väärtust? Kas me määratleme kolm rida?

Ei, me ei määratle kolme rida. Aga me See on kolme väärtuse määratlemine meie kaudsete ridade mustrina. Loogika on järgmine:

• Kui meil on üks rida, määratakse selle suurus esimese väärtusega.
• Kui meil on kaks rida, saab esimene väärtus esimese ja teine ​​teise väärtuse.
• Kui meil on kolm rida, kasutatakse kolme väärtust.
• Kui meil on neli rida (ja siit tuleb huvitav osa), kasutame kolme esimese rea jaoks kolme väärtust ja taaskasutame esimest väärtust neljanda rea ​​jaoks. Seetõttu on see omamoodi muster, mida kordame kõigi kaudsete ridade suuruse määramiseks.
• Kui meil on 100 rida, on nende suurus kolm korda kolm 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1frJne

Erinevalt grid-template-rows mis määrab ridade arvu ja nende suuruse, grid-auto-rows ainult suuruste rida, mis võidakse luua.

Kui tuleme tagasi meie näite juurde, on loogika, et kahe rea loomisel on võrdne suurus (kasutame 2fr 2fr), aga kui luuakse kolmas rida, muudame selle natuke väiksemaks.

Võrgumustrid

Viimase puhul räägime mustritest. Tõenäoliselt olete näinud neid kahte veergude paigutust, kus üks veerg on teisest laiem ja iga rida vaheldub nende veergude paigutusega.

Seda sorti paigutust võib olla liiga keeruline välja tõmmata, kui ei tea täpselt, kui palju sisu meil tegemist on, kuid CSS Gridi kaudsed automaatse paigutuse võimalused muudavad selle suhteliselt lihtsaks.

Heitke pilk koodile. See võib tunduda keeruline, kuid jagame selle lahti, sest lõppkokkuvõttes on see üsna lihtne.

Esimene asi, mida teha, on mustri tuvastamine. Küsige endalt: "Pärast mitut elementi peaks muster korduma?" Sel juhul on see iga nelja elemendi järel. Niisiis, vaatame praegu ainult nelja elemendi kasutamist:

Nüüd määratleme ruudustiku ja seadistame üldise mustri kasutades :nth-child valija elementide vaheldumiseks:

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

Ütlesime, et meie muster kordub iga nelja elemendi järel, seega kasutame loogiliselt 4n + x kus x jääb vahemikku 1 kuni 4. Mustrit on veidi lihtsam selgitada järgmiselt:

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äiuslik, eks? Meil on neli elementi ja korrake mustrit viiendal, üheksandal elemendil ja nii edasi.

Need :nth-child valijad võivad olla keerulised! Chrisil on väga abivalmis selgitus, kuidas see kõik töötab, Sealhulgas retseptid erinevate mustrite loomiseks.

Nüüd konfigureerime iga elemendi nii, et:

1. Esimene element peab võtma kaks veergu ja alustama esimesest veerust (grid-column: 1/span 2).
2. Teine element asetatakse kolmandasse veergu (grid-column-start: 3).
3. Kolmas element asetatakse esimesse veergu: (grid-column-start: 1).
4. Neljas element võtab kaks veergu ja algab teisest veerust: (grid-column: 2/span 2).

Siin on see CSS-is:

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

Võiksime siin peatuda ja olla tehtud… aga me saame teha paremini! Täpsemalt saame eemaldada mõned deklaratsioonid ja usaldada gridi automaatse paigutuse volitusi, et see töö meie eest ära teha. See on grokimise kõige keerulisem osa ja nõuab palju harjutamist, et tuvastada, mida saab eemaldada.

Esimene asi, mida saame teha, on värskendada grid-column: 1 /span 2 ja kasutada ainult grid-column: span 2 kuna vaikimisi paigutab brauser esimese üksuse esimesse veergu. Saame ka selle eemaldada:

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

Esimese, teise ja neljanda üksuse paigutamisel asetab ruudustik kolmanda üksuse automaatselt õigesse kohta. See tähendab, et meile jääb see:

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

Aga no me saame jalutada, et saaksime paremini hakkama! Saame ka selle eemaldada:

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

Miks? Kui asetame neljanda elemendi teise veergu, võimaldades sellel hõivata kaks täisveergu, sunnime ruudustikku looma kolmanda kaudse veeru, mis annab meile kokku kolm veergu, ilma et see oleks selgesõnaliselt nõus. Neljas element ei saa minna esimesse ritta, kuna ka esimene üksus võtab kaks veergu, nii et see liigub järgmisele reale. See konfiguratsioon jätab meile esimesele reale tühja veeru ja teise rea tühja veeru.

Ma arvan, et teate loo lõppu. Brauser paigutab teise ja kolmanda üksuse automaatselt nendesse tühjadesse kohtadesse. Nii muutub meie kood veelgi lihtsamaks:

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

Väga laheda ja väga paindliku mustri loomiseks on vaja vaid viit deklaratsiooni. Optimeerimise osa võib olla keeruline, kuid sellega harjub ja harjutades saab nippe juurde.

Miks mitte kasutada grid-template-columns selgesõnaliste veergude määratlemiseks, kuna me teame veergude arvu?

Me saame seda teha! Siin on selle kood:

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

Nagu näete, on kood kindlasti intuitiivsem. Määratleme kolm selgesõnalist ruudustiku veergu ja ütleme brauserile, et esimene ja neljas element peavad võtma kaks veergu. Soovitan soojalt seda lähenemist! Kuid selle artikli eesmärk on uurida uusi ideid ja nippe, mida saame CSS Gridi kaudsetest ja automaatse paigutuse võimalustest.

Selgesõnaline lähenemine on arusaadavam, samas kui kaudne ruudustik nõuab, et - vabandage sõnamängu eest - täitke lüngad, kus CSS teeb kulisside taga lisatööd. Lõppkokkuvõttes usun, et kaudsete võrgustike põhjalik mõistmine aitab teil CSS-i ruudustiku algoritmi paremini mõista. Lõppude lõpuks ei ole me siin selleks, et uurida seda, mis on ilmne – me oleme siin selleks, et uurida metsikuid territooriume!

Proovime teist mustrit, seekord veidi kiiremat:

Meie muster kordub iga kuue elemendi järel. Kolmas ja neljas element peavad mõlemad hõivama kaks täisrida. Kui asetame kolmanda ja neljanda elemendi, tundub, et me ei pea teisi puudutama, seega proovime järgmist:

.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, pole hea. Peame asetama teise elemendi esimesse veergu. Vastasel juhul asetab ruudustik selle automaatselt teise veergu.

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

Parem, aga tööd on veel rohkem. Peame kolmanda elemendi ülemisse nihutama. On ahvatlev proovida asetada see esimesse ritta järgmiselt:

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

Kuid see ei tööta, sest see sunnib kõiki 6n + 3 elemendid paigutatakse samale alale, mis muudab paigutuse segaseks. Tegelik lahendus on jätta alles kolmanda elemendi esialgne määratlus ja lisada grid-auto-flow: dense lünkade täitmiseks. MDN-ist:

[] "tihe" pakkimisalgoritm üritab täita ruudustiku varasemates aukudes, kui hiljem tulevad esile väiksemad esemed. See võib põhjustada esemete ebakorrapärasust, kui see täidab suuremate esemete jäetud augud. Kui see ära jäetakse, kasutatakse “hõredat” algoritmi, kus paigutusalgoritm liigub üksuste paigutamisel ruudustikus alati “edasi”, mitte kunagi tagasi, et täita auke. See tagab, et kõik automaatselt paigutatud üksused paistavad "korras", isegi kui see jätab auke, mida oleks võinud täita hilisemad üksused.

Ma tean, et see omadus ei ole väga intuitiivne, kuid ärge unustage seda kunagi, kui teil on paigutusprobleeme. Enne erinevate konfiguratsioonide asjata proovimist lisage see, sest see võib teie paigutust ilma täiendavate pingutusteta parandada.

Miks mitte alati seda atribuuti vaikimisi lisada?

Ma ei soovita seda, sest mõnel juhul me sellist käitumist ei soovi. Pange tähele, kuidas sealne MDN-i selgitus mainib, et see põhjustab üksuste "korrast väljavoolu", et täita suuremate esemete jäetud auke. Visuaalne järjekord on tavaliselt sama oluline kui lähtejärjestus, eriti kui tegemist on juurdepääsetavate liidestega ja grid-auto-flow: dense võib mõnikord põhjustada mittevastavust visuaalse ja lähtekoodi järjestuse vahel.

Meie lõplik kood on siis:

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

Veel üks? Lähme!

Selle puhul ma ei räägi liiga palju ja näitan teile selle asemel näidet kasutatud koodist. Proovige näha, kas saate aru, kuidas ma selle koodini jõudsin:

Mustad esemed paigutatakse kaudselt ruudustikule. Tuleb märkida, et me saame sama kujunduse saada mitmel viisil kui see, kuidas mina sinna jõudsin. Kas sa saad ka need aru? Aga kasutamisega grid-template-columns? Jagage oma töid kommentaaride jaotises.

Ma jätan teile viimase mustri:

Mina on lahendus selle jaoks, kuid on teie kord harjutada. Võtke kõik, mida oleme õppinud, ja proovige see ise kodeerida ja seejärel võrrelda seda minu lahendusega. Ärge muretsege, kui lõpetate millegi paljusõnalisega – kõige tähtsam on toimiva lahenduse leidmine.

Tahad rohkem?

Enne kui lõpetame, tahan jagada mõnda Stack Overflow küsimust, mis on seotud CSS Gridiga, kuhu ma sain vastused, mis kasutavad paljusid siin koos käsitletud tehnikaid. See on hea loend, mis näitab, kui palju tegelikke kasutusjuhtumeid ja tegelikke olukordi tuleb ette, kui need asjad on kasulikud:

Pakke kuni

CSS Grid on olnud juba aastaid, kuid endiselt on palju vähetuntud ja kasutatud nippe, millest laiemalt ei räägita. Kaudne ruudustik ja automaatse paigutuse funktsioonid on kaks neist!

Ja jah, see võib olla keeruline! Mul on kulunud palju aega kaudsete võrkude taga oleva loogika väljamõtlemiseks ja ma olen endiselt hädas automaatse paigutusega. Kui soovite veeta rohkem aega selgesõnaliste ja kaudsete võredega mähkides, on siin paar täiendavat selgitust ja näidet, mida tasub vaadata:

Samamoodi võiksite lugeda grid-auto-columns CSS-Tricks Almanac'is, sest Mojtaba Seyedi läheb väga üksikasjalikult ja sisaldab uskumatult kasulikke visuaale, mis aitavad käitumist selgitada.

Nagu ma alustades ütlesin, ei ole siin käsitletud meetodid mõeldud asendama tavalisi võrkude ehitamise viise, mida te juba teate. Ma lihtsalt uurin erinevaid viise, mis võivad mõnel juhul abiks olla.