CSS Gridin implisiittisen ruudukon ja automaattisen sijoittelun kykyjen tutkiminen

Kun työskentelet CSS Gridin kanssa, ensimmäinen asia on määrittää display: grid elementissä, josta haluamme tulla ruudukkosäiliö. Sitten määritämme ruudukon eksplisiittisesti käyttämällä yhdistelmää grid-template-columns, grid-template-rowsja grid-template-areas. Ja sieltä seuraava askel on sijoittaa kohteita ruudukon sisään.

Tämä on klassinen lähestymistapa, jota tulisi käyttää, ja suosittelen sitä myös. On kuitenkin olemassa toinen lähestymistapa verkkojen luomiseen ilman mitään selkeää määritelmää. Kutsumme tätä implisiittinen verkko.

"Eksplisiittistä, implisiittistä? Mitä ihmettä täällä tapahtuu?"

Outoja termejä, eikö? Manuel Matuzovic jo on hyvä selitys mitä voimme "implisiittisellä" ja "eksplisiittisellä" CSS Gridissä, mutta kaivetaanpa suoraan mitä Ishayoiden opettaman specification sanoo:

- grid-template-rows, grid-template-columnsja grid-template-areas ominaisuudet määrittävät kiinteän määrän muodostuvia raitoja eksplisiittinen ruudukko. Kun ruudukkokohteet sijoitetaan näiden rajojen ulkopuolelle, ruudukkosäilö luo implisiittisiä ruudukkoraitoja lisäämällä implisiittisiä ruudukkoviivoja ruudukkoon. Nämä rivit muodostavat yhdessä selkeän ruudukon implisiittinen verkko.

Eli selkein englannin kielellä selain luo automaattisesti ylimääräisiä rivejä ja sarakkeita, jos elementtejä sattuu sijoittumaan määritellyn ruudukon ulkopuolelle.

Entä automaattinen sijoittelu?

Samanlainen kuin implisiittisen ruudukon käsite, automaattinen sijoittelu on selaimen kyky sijoittaa kohteet automaattisesti ruudukon sisään. Meidän ei aina tarvitse ilmoittaa jokaisen kohteen sijaintia.

Erilaisten käyttötapausten kautta aiomme nähdä, kuinka tällaiset ominaisuudet voivat auttaa meitä luomaan monimutkaisen ja dynaamisen ruudukon muutamalla koodirivillä.

Dynaaminen sivupalkki

Tässä meillä on kolme erilaista asettelua, mutta meillä on vain yksi ruudukkokokoonpano, joka toimii niille kaikille.

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

Vain yksi sarake vie kaiken vapaan tilan. Tämä on "selkeä" ruudukkomme. Se on määritetty sovittamaan yksi ruudukkokohde main verkkosäiliö. Siinä kaikki. Yksi sarake ja yksi rivi:

Mutta entä jos päättäisimme pudottaa siihen toisen elementin, vaikkapa an aside (dynaaminen sivupalkki). Kuten tällä hetkellä (ja nimenomaisesti) on määritelty, ruudukkomme on mukauduttava automaattisesti löytääkseen paikan kyseiselle elementille. Ja jos emme tee mitään muuta CSS:llämme, tässä on mitä DevTools kertoo meille tapahtuvan.

Voimme siirtää <aside> vieressä olevaan sarakkeeseen <section>:

aside {
  grid-column-start: 2;
}

Ja tässä on mitä DevTools kertoo meille nyt:

Sijoitamme elementtimme toiseen sarakkeeseen, mutta… meillä ei ole toista saraketta. Outoa, eikö? Emme koskaan julistaneet toista saraketta <main> grid kontti, mutta selain loi sellaisen meille! Tämä on keskeinen osa tarkastelemistamme eritelmistä:

Kun ruudukkokohteet sijoitetaan näiden rajojen ulkopuolelle, ruudukkosäilö luo implisiittisiä ruudukkoraitoja lisäämällä implisiittisiä ruudukkoviivoja ruudukkoon.

Tämän tehokkaan ominaisuuden ansiosta voimme luoda dynaamisia asetteluja. Jos meillä on vain <section> elementti, saamme vain yhden sarakkeen. Mutta jos lisäämme an <aside> sekoitukseen, luodaan ylimääräinen sarake, joka sisältää sen.

Voisimme sijoittaa <aside> ennen <section> sen sijaan näin:

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

Tämä luo implisiittisen sarakkeen ruudukon alkuun, toisin kuin edellinen koodi, joka sijoittaa implisiittisen sarakkeen loppuun.

Voimme tehdä saman asian helpommin käyttämällä grid-auto-flow ominaisuus asettaa kaikki implisiittiset raidat virtaamaan a column suunta:

Nyt ei tarvitse täsmentää grid-column-start sijoittaa <aside> elementin oikealla puolella <section>! Itse asiassa mikä tahansa muu ruudukkokohde, jonka päätämme heittää sinne milloin tahansa, virtaa nyt sarakkeen suuntaan, jokainen sijoitetaan omille implisiittisille ruudukkoraiteilleen. Täydellinen tilanteisiin, joissa ruudukon kohteiden lukumäärää ei tiedetä etukäteen!

Se sanoi, että tarvitsemme edelleen grid-column-end jos haluamme sijoittaa sen sen vasemmalle puolelle sarakkeeseen, koska muuten <aside> vie eksplisiittisen sarakkeen, joka puolestaan ​​työntää <section> eksplisiittisen ruudukon ulkopuolella ja pakottaa sen ottamaan implisiittisen sarakkeen.

Tiedän tiedän. Se on vähän sekava. Tässä on toinen esimerkki, jonka avulla voimme ymmärtää paremmin tätä pientä omituisuutta:

Ensimmäisessä esimerkissä emme määrittäneet mitään sijoittelua. Tässä tapauksessa selain asettaa ensin <aside> elementti eksplisiittisessä sarakkeessa, koska se on ensin DOM:ssa. The <section>Sillä välin sijoitetaan automaattisesti ruudukkosarakkeeseen, jonka selain automaattisesti (tai implisiittisesti) luo meille.

Toisessa esimerkissä asetimme <aside> eksplisiittisen ruudukon ulkopuolella oleva elementti:

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

Nyt sillä ei ole väliä <aside> tulee ensin HTML:ssä. Määräämällä uudelleen <aside> jossain muualla olemme tehneet <section> elementti käytettävissä eksplisiittisen sarakkeen ottamiseksi.

Kuvaruudukko

Kokeillaan jotain erilaista kuvaruudukolla, jossa meillä on iso kuva ja muutama pikkukuva sen vieressä (tai sen alla).

Meillä on kaksi verkkokokoonpanoa. Mutta arvaa mitä? En määrittele yhtään ruudukkoa! Kaikki mitä teen on tämä:

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

On yllättävää, että tarvitsemme vain yhden rivin koodia saadaksemme jotain tällaista, joten analysoidaan, mitä tapahtuu, ja huomaat, että se on helpompaa kuin luuletkaan. Ensinnäkin, grid-area on lyhennetty ominaisuus, joka yhdistää seuraavat ominaisuudet yhdeksi ilmoitukseksi:

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

Odota! Eikö olekin grid-area ominaisuus, jota käytämme määrittelemään nimetyt alueet sen sijaan, missä elementit alkavat ja päättyvät ruudukossa?

Kyllä, mutta se tekee myös enemmän. Voisimme kirjoittaa paljon enemmän grid-area, mutta tässä nimenomaisessa tapauksessa:

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

Voimme nähdä saman asian avattaessa DevToolsia lyhennetyn version laajentamiseksi:

Tämä tarkoittaa, että ruudukon ensimmäisen kuvaelementin on ulottuva kolme saraketta ja kolme riviä. Mutta koska emme määrittäneet sarakkeita tai rivejä, selain tekee sen puolestamme.

Olemme käytännössä sijoittaneet ensimmäisen kuvan HTML-koodiin 3⨉3-ruudukon muodostamiseksi. Tämä tarkoittaa, että kaikki muut kuvat sijoitetaan automaattisesti samoihin kolmeen sarakkeeseen ilman, että sinun tarvitsee määrittää mitään uutta.

Yhteenvetona kerroimme selaimelle, että ensimmäinen kuva tarvitsee tilaa kolmesta sarakkeesta ja kolmesta rivistä, joita emme koskaan nimenomaisesti määrittäneet ruudukkosäilöä määritettäessä. Selain asetti nämä sarakkeet ja rivit puolestamme. Tuloksena, muut HTML-kuvat virtaavat paikoilleen samoilla kolmella sarakkeella ja rivillä. Ja koska ensimmäinen kuva täyttää kaikki kolme ensimmäisen rivin saraketta, loput kuvat virtaavat lisäriveille, joista jokainen sisältää kolme saraketta, joissa jokainen kuva vie yhden sarakkeen.

Kaikki tämä yhdeltä CSS-riviltä! Se on "implisiittisen" ruudukon ja automaattisen sijoittelun voima.

Demon toisessa ruudukkokokoonpanossa olen vain muuttanut automaattista virtaussuuntaa käyttämällä grid-auto-flow: column samalla tavalla kuin teimme aiemmin asettaessamme <aside> elementti vieressä a <section>. Tämä pakottaa selaimen luomaan a neljäs sarake, jota se voi käyttää jäljellä olevien kuvien sijoittamiseen. Ja koska meillä on kolme riviä, loput kuvat sijoitetaan samaan pystysuoraan sarakkeeseen.

Meidän on lisättävä kuviin muutama ominaisuus varmistaaksemme, että ne sopivat hyvin ruudukon sisään ilman ylivuotoa:

.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 tietysti voimme helposti päivittää ruudukon huomioimaan useampia kuvia säätämällä yhtä arvoa. Se olisi se 3 suuren kuvan tyyleissä. Meillä on tämä:

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

Mutta voisimme lisätä neljännen sarakkeen yksinkertaisesti muuttamalla sen muotoon 4 sen sijaan:

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

Vielä parempi: määritetään se mukautetuksi omaisuudeksi, jotta asioiden päivittäminen olisi entistä helpompaa.

Dynaamiset asettelut

Ensimmäinen käyttötapaus sivupalkin kanssa oli ensimmäinen dynaaminen asettelumme. Nyt käsittelemme monimutkaisempia asetteluja, joissa elementtien määrä sanelee ruudukon kokoonpanon.

Tässä esimerkissä meillä voi olla missä tahansa yhdestä neljään elementtiä, joissa ruudukko mukautuu siten, että se sopii hyvin elementtien lukumäärään jättämättä hankalia aukkoja tai puuttuvia välilyöntejä.

Kun meillä on yksi elementti, emme tee mitään. Elementti venyy täyttääkseen ainoan ruudukon automaattisesti luoman rivin ja sarakkeen.

Bitti kun lisäämme toisen elementin, luomme toisen (implisiittisen) sarakkeen käyttämällä grid-column-start: 2.

Kun lisäämme kolmannen elementin, sen tulisi olla kahden sarakkeen leveys - siksi käytimme grid-column-start: span 2, mutta vain jos se on :last-child koska jos (ja milloin) lisäämme neljännen elementin, sen pitäisi olla vain yksi sarake.

Kun tämä lisätään, meillä on neljä ruudukkokokoonpanoa vain kaksi ilmoitusta ja implisiittisen ruudukon taika:

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

Kokeillaan toista:

Emme tee mitään ensimmäisessä ja toisessa tapauksessa, joissa meillä on vain yksi tai kaksi elementtiä. Kun lisäämme kuitenkin kolmannen elementin, kerromme selaimelle, että - kunhan se on :last-child — sen tulee kattaa kaksi saraketta. Kun lisäämme neljännen elementin, kerromme selaimelle, että elementti on sijoitettava toiseen sarakkeeseen.

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

Oletko alkanut ymmärtämään temppua? Annamme selaimelle erityisiä ohjeita elementtien lukumäärän perusteella (käyttäen :nth-child) ja joskus yksi ohje voi muuttaa asettelun kokonaan.

On huomattava, että koko ei ole sama, kun työskentelemme eri sisällön kanssa:

Koska emme määrittäneet tuotteillemme kokoja, selain kokoaa ne automaattisesti puolestamme niiden sisällön perusteella ja saatamme päätyä erilaiseen kokoon kuin mitä juuri näimme. Tämän voittamiseksi meidän on tehtävä nimenomaisesti määritä, että kaikki sarakkeet ja rivit ovat samankokoisia:

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

Hei, emme ole vielä pelanneet noilla ominaisuuksilla! grid-auto-rows ja grid-auto-columns aseta implisiittisten rivien ja sarakkeiden koko ruudukkosäilöön. Tai, kuten spec selittää sen:

- grid-auto-columns ja grid-auto-rows ominaisuudet määrittävät niiden raitojen koon, joille kokoa ei ole määritetty grid-template-rows or grid-template-columns.

Tässä on toinen esimerkki, jossa voimme mennä jopa kuuteen elementtiin. Tällä kertaa annan sinun purkaa koodia. Älä huoli, valitsimet voivat näyttää monimutkaisilta, mutta logiikka on melko suoraviivaista.

Kuuden elementin kanssa tarvitsimme vain kaksi ilmoitusta. Kuvittele kaikki monimutkaiset ja dynaamiset asettelut, jotka voimme saavuttaa muutamalla koodirivillä!

Mitä sen kanssa tapahtuu grid-auto-rows ja miksi siihen tarvitaan kolme arvoa? Määrittelemmekö kolme riviä?

Ei, emme määrittele kolmea riviä. Mutta me olemme määrittelemällä kolme arvoa malliksi implisiittisille riveillemme. Logiikka on seuraava:

• Jos meillä on yksi rivi, se kootaan ensimmäisellä arvolla.
• Jos meillä on kaksi riviä, ensimmäinen saa ensimmäisen arvon ja toinen toisen arvon.
• Jos meillä on kolme riviä, kolme arvoa käytetään.
• Jos meillä on neljä riviä (ja tässä tulee mielenkiintoinen osa), käytämme kolmea arvoa kolmelle ensimmäiselle riville ja käytämme ensimmäistä arvoa uudelleen neljännelle riville. Siksi se on eräänlainen kuvio, jonka toistamme kaikkien implisiittisten rivien kokoamiseksi.
• Jos meillä on 100 riviä, ne kootaan kolme kertaa kolmeen 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, Jne

Toisin kuin grid-template-rows joka määrittää rivien lukumäärän ja niiden koon, grid-auto-rows vain kokorivi, joka voidaan luoda matkan varrella.

Jos palaamme esimerkkiimme, logiikka on, että sen koko on sama, kun kaksi riviä luodaan (käytämme 2fr 2fr), mutta jos kolmas rivi luodaan, teemme siitä hieman pienemmän.

Ruudukkomallit

Tämän viimeisen osalta aiomme puhua malleista. Olet luultavasti nähnyt nämä kaksi sarakeasettelua, joissa toinen sarake on toista leveämpi ja jokainen rivi vaihtaa näiden sarakkeiden sijoittelua.

Tällainen asettelu voi olla liian vaikeaa, jos ei tiedetä tarkalleen, kuinka paljon sisältöä käsittelemme, mutta CSS Gridin implisiittiset automaattisen sijoittelun voimat tekevät siitä suhteellisen vaivan.

Vilkaise koodia. Se voi näyttää monimutkaiselta, mutta puretaan se, koska se on lopulta melko suoraviivaista.

Ensimmäinen asia on tunnistaa kuvio. Kysy itseltäsi: "Kuinka monen elementin jälkeen kuvion pitäisi toistaa?" Tässä tapauksessa se on jokaisen neljän elementin jälkeen. Joten, tarkastellaan nyt vain neljän elementin käyttöä:

Nyt määritellään ruudukko ja asetetaan yleinen kuvio käyttämällä :nth-child valitsin elementtien vaihtamiseen:

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

Sanoimme, että kuviomme toistuu joka neljäs elementti, joten käytämme loogisesti 4n + x jossa x vaihtelee välillä 1 - 4. Kuvio on hieman helpompi selittää näin:

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äydellistä, eikö? Meillä on neljä elementtiä, ja toista kuvio viidennellä elementillä, yhdeksännellä elementillä ja niin edelleen.

Ne :nth-child valitsijat voivat olla hankalia! Chrisillä on erittäin avulias selitys kuinka kaikki toimiimukaan lukien reseptejä erilaisten kuvioiden luomiseen.

Nyt määritämme jokaisen elementin siten, että:

1. Ensimmäisessä elementissä on oltava kaksi saraketta ja aloitettava yhdestä sarakkeesta (grid-column: 1/span 2).
2. Toinen elementti sijoitetaan kolmanteen sarakkeeseen (grid-column-start: 3).
3. Kolmas elementti sijoitetaan ensimmäiseen sarakkeeseen: (grid-column-start: 1).
4. Neljäs elementti ottaa kaksi saraketta ja alkaa toisesta sarakkeesta: (grid-column: 2/span 2).

Tässä se on CSS:ssä:

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

Voisimme lopettaa tähän ja olla valmiit… mutta voimme tehdä paremmin! Erityisesti voimme poistaa joitain ilmoituksia ja luottaa gridin automaattiseen sijoitteluun, jotta se tekee työn puolestamme. Tämä on vaikein osa grokissa ja vaatii paljon harjoittelua, jotta voidaan tunnistaa, mitä voidaan poistaa.

Ensimmäinen asia, jonka voimme tehdä, on päivittää grid-column: 1 /span 2 ja käyttää vain grid-column: span 2 koska oletusarvoisesti selain sijoittaa ensimmäisen kohteen ensimmäiseen sarakkeeseen. Voimme myös poistaa tämän:

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

Asettamalla ensimmäisen, toisen ja neljännen kohteen ruudukko asettaa automaattisesti kolmannen kohteen oikeaan paikkaan. Tämä tarkoittaa, että meille jää tämä:

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

Mutta mennään, voimme kävellä tehdä paremmin! Voimme myös poistaa tämän:

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

Miksi? Jos sijoitamme neljännen elementin toiseen sarakkeeseen ja annamme sen täyttää kaksi täyttä saraketta, pakotamme ruudukon luomaan kolmannen implisiittisen sarakkeen, jolloin saamme yhteensä kolme saraketta ilman, että sitä nimenomaisesti kerrotaan. Neljäs elementti ei voi mennä ensimmäiselle riville, koska myös ensimmäinen alkio ottaa kaksi saraketta, joten se siirtyy seuraavalle riville. Tämä kokoonpano jättää meille tyhjän sarakkeen ensimmäiselle riville ja tyhjän toiselle riville.

Luulen, että tiedät tarinan lopun. Selain sijoittaa automaattisesti toisen ja kolmannen kohteen näihin tyhjiin kohtiin. Joten koodistamme tulee entistä yksinkertaisempi:

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

Riittää, kun viisi ilmoitusta luodaan erittäin siisti ja erittäin joustava malli. Optimointiosa voi olla hankala, mutta siihen tottuu ja harjoittelemalla saa temppuja.

Miksei käytä grid-template-columns määrittääksesi eksplisiittiset sarakkeet, koska tiedämme sarakkeiden lukumäärän?

Me voimme tehdä tuon! Tässä koodi sille:

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

Kuten näet, koodi on ehdottomasti intuitiivisempi. Määrittelemme kolme eksplisiittistä ruudukkosaraketta ja kerromme selaimelle, että ensimmäisen ja neljännen elementin tulee ottaa kaksi saraketta. Suosittelen lämpimästi tätä lähestymistapaa! Mutta tämän artikkelin tavoitteena on tutkia uusia ideoita ja temppuja, joita saamme CSS Gridin implisiittisistä ja automaattisista sijoitteluista.

Eksplisiittinen lähestymistapa on yksinkertaisempi, kun taas implisiittinen ruudukko edellyttää, että - anteeksi sanapeli - täytät aukot, joissa CSS tekee lisätyötä kulissien takana. Loppujen lopuksi uskon, että implisiittisten ruudukoiden vankka ymmärtäminen auttaa sinua ymmärtämään paremmin CSS Grid -algoritmia. Loppujen lopuksi emme ole täällä tutkiaksemme sitä, mikä on ilmeistä – olemme täällä tutkiaksemme villialueita!

Kokeillaan toista mallia, tällä kertaa hieman nopeampaa:

Kuviomme toistuu joka kuudes elementti. Kolmannen ja neljännen elementin on täytettävä kaksi täyttä riviä. Jos sijoitamme kolmannen ja neljännen elementin, näyttää siltä, ​​että meidän ei tarvitse koskea muihin, joten kokeillaan seuraavaa:

.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, ei hyvä. Meidän on sijoitettava toinen elementti ensimmäiseen sarakkeeseen. Muussa tapauksessa ruudukko sijoittaa sen automaattisesti toiseen sarakkeeseen.

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

Parempi, mutta työtä on vielä enemmän. Meidän on siirrettävä kolmas elementti yläosaan. On houkuttelevaa yrittää sijoittaa se ensimmäiselle riville seuraavasti:

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

Mutta tämä ei toimi, koska se pakottaa kaiken 6n + 3 elementit sijoitetaan samalle alueelle, mikä tekee asettelusta sekaisin. Todellinen ratkaisu on säilyttää kolmannen elementin alkuperäinen määritelmä ja lisätä grid-auto-flow: dense täyttämään aukkoja. MDN:ltä:

[] "tiheä" pakkausalgoritmi yrittää täyttää aiemmin ruudukon reikiin, jos pienempiä kohteita tulee myöhemmin esille. Tämä saattaa aiheuttaa sen, että tuotteet näyttävät epäkunnossa, jolloin se täyttää suurempien tuotteiden jättämät aukot. Jos se jätetään pois, käytetään "harvaa" algoritmia, jossa sijoitusalgoritmi vain liikkuu "eteenpäin" ruudukossa kohteita sijoitettaessa, ei koskaan perääntyessään täyttämään reikiä. Tämä varmistaa, että kaikki automaattisesti sijoitetut kohteet näkyvät "järjestyksessä", vaikka tämä jättäisikin reikiä, jotka olisivat voitu täyttää myöhemmillä kohteilla.

Tiedän, että tämä ominaisuus ei ole kovin intuitiivinen, mutta älä koskaan unohda sitä, kun kohtaat sijoitteluongelmia. Ennen kuin yrität turhaan erilaisia ​​kokoonpanoja, lisää se, koska se saattaa korjata asettelusi ilman lisäponnistuksia.

Mikset aina lisää tätä ominaisuutta oletuksena?

En suosittele sitä, koska joissain tapauksissa emme halua sellaista käytöstä. Huomaa, kuinka MDN:n selitys mainitsee, että se saa tuotteet virtaamaan "ei-kunnossa" täyttämään suurempien esineiden jättämiä reikiä. Visuaalinen järjestys on yleensä yhtä tärkeä kuin lähdejärjestys, varsinkin kun on kyse saavutettavista käyttöliittymistä ja grid-auto-flow: dense voi joskus aiheuttaa epäsuhta visuaalisen ja lähdejärjestyksen välillä.

Lopullinen koodimme on sitten:

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

Toinen? Mennään!

Tämän osalta en puhu liikaa, vaan näytän sinulle kuvan käyttämästäni koodista. Yritä nähdä, ymmärrätkö kuinka pääsin tuohon koodiin:

Mustat kohteet sijoitetaan implisiittisesti ruudukkoon. On huomattava, että voimme saada saman asettelun useammilla tavoilla kuin miten pääsin sinne. Voitko myös selvittää ne? Entä käyttö grid-template-columns? Jaa työsi kommenttiosiossa.

Jätän sinulle viimeisen kaavan:

En on ratkaisu tähän, mutta sinun vuorosi harjoitella. Ota kaikki oppimamme ja yritä koodata tämä itse ja vertaa sitä sitten ratkaisuoni. Älä huoli, jos päätät johonkin monisanaiseen – tärkeintä on toimivan ratkaisun löytäminen.

Haluta lisää?

Ennen kuin lopetamme, haluan jakaa muutaman CSS Gridiin liittyvän Stack Overflow -kysymyksen, joihin sain vastaukset, jotka käyttävät monia tässä yhdessä käsiteltyjä tekniikoita. Se on hyvä luettelo, joka näyttää kuinka monta todellista käyttötapausta ja todellista maailmaa esiintyy, kun nämä asiat ovat hyödyllisiä:

Käärimistä

CSS Grid on ollut olemassa jo vuosia, mutta edelleen on paljon vähän tunnettuja ja käytettyjä temppuja, joista ei keskustella laajasti. Implisiittinen ruudukko ja automaattinen sijoittelu ovat kaksi niistä!

Ja kyllä, tämä voi olla haastavaa! Minulta on mennyt paljon aikaa implisiittisten verkkojen takana olevan logiikan selvittämiseen, ja kamppailen edelleen automaattisen sijoittelun kanssa. Jos haluat viettää enemmän aikaa eksplisiittisten ja implisiittisten ruudukoiden ympärille, tässä on muutama lisäselitys ja esimerkki, jotka kannattaa tarkistaa:

Samoin saatat haluta lukea aiheesta grid-auto-columns CSS-Tricks Almanakissa, koska Mojtaba Seyedi menee hyvin yksityiskohtiin ja sisältää uskomattoman hyödyllisiä visuaalisia ominaisuuksia, jotka auttavat selittämään käyttäytymistä.

Kuten sanoin aloittaessamme, tässä käsiteltyjen menetelmien ei ole tarkoitus korvata jo tuntemiasi tavallisia tapoja rakentaa verkkoja. Tutkin vain erilaisia ​​tapoja, jotka voivat olla hyödyllisiä joissakin tapauksissa.