CSS Academy · Oppitunti

Implisiittinen grid ja grid-auto-flow

Ymmärtäkää, miten CSS Grid käsittelee eksplisiittisten raitojen ulkopuoliset kohteet implisiittisten rivien ja sarakkeiden avulla.

Oppitunti 3/413 vaihetta

Implisiittinen grid ja grid-auto-flow on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Eksplisiittinen ja implisiittinen ruudukko

Eksplisiittinen ruudukko määritetään ominaisuuksilla grid-template-columns ja grid-template-rows. Kun kohteet ylittävät näillä määritetyt raidat, selain luo automaattisesti implisiittisiä raitoja.

grid-auto-rows

Määrittää implisiittisesti luotujen riviraitojen koon. Ilman tätä määritystä implisiittiset rivit mitoitetaan sisältöön sopiviksi (auto).

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

grid-auto-rows ja minmax

Voit määrittää implisiittisille riveille vähimmäiskorkeuden ja sallia niiden kasvamisen:

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

grid-auto-columns

Määrittää implisiittisten sarakeraitojen koot, kun kohteita sijoitetaan eksplisiittisen sarakealueen ulkopuolelle:

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

grid-auto-flow

Ohjaa, miten automaattisen sijoittelun algoritmi sijoittaa kohteet:

row (oletus) — sijoittaa riveille ja lisää uusia rivejä tarvittaessa
column — sijoittaa sarakkeisiin ja lisää uusia sarakkeita
row dense — täyttää aukkoja tehokkaasti palaamalla aiempiin kohtiin
column dense — täyttää aukkoja tehokkaasti sarakesuunnassa

grid-auto-flow: dense

dense saa algoritmin yrittämään suurten, usean raidan yli ulottuvien kohteiden jättämien aukkojen täyttämistä. Tämän seurauksena kohteet voivat näkyä eri järjestyksessä kuin lähdekoodissa.

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

Sarakkeittain etenevä automaattisen sijoittelun malli

Vaakasuunnassa vieritettävä korttinauha, jossa sarakkeet kasvavat tarpeen mukaan:

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

Tiivis kuvagallerian pakkaus

Erikokoisten kuvien galleria, joka täyttää aukot:

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

Implisiittinen ruudukko ja nimetyt alueet

Nimetyt alueet koskevat vain eksplisiittistä ruudukkoa. Implisiittiseen ruudukkoon sijoitetut kohteet eivät voi käyttää nimettyä aluesijoittelua suoraan, vaan ne tarvitsevat linjanumeron tai span-määrityksen.

Implisiittisen ruudukon visualisointi

Chromen DevTools-työkalujen asettelupeite näyttää sekä eksplisiittiset (yhtenäiset) että implisiittiset (katkoviivaiset) ruudukon linjat. Tämä auttaa ymmärtämään, mihin automaattisesti sijoitetut kohteet päätyvät.

Implisiittisen koon hallinta kohdekohtaisesti

Implisiittisessä ruudukossa usean rivin yli ulottuvat kohteet tarvitsevat grid-auto-rows-määrityksen, jotta niiden koko lasketaan oikein. Ilman sitä implisiittiset rivit mitoitetaan sisällön mukaan, mikä voi johtaa epätasaiseen asetteluun.

Pikatarkistus

Mitä grid-auto-flow: row dense tekee?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Implisiittinen ruudukko laajentaa eksplisiittistä ruudukkoa automaattisesti luoduilla raidoilla. grid-auto-rows/columns hallitsee niiden kokoa ja minmax() tekee niistä joustavia. grid-auto-flow määrittää sijoittelusuunnan. dense-pakkaus täyttää aukkoja tehokkaasti — se on hyödyllinen muurauksen kaltaisissa asetteluissa, mutta voi rikkoa visuaalisen järjestyksen.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Implisiittinen grid ja grid-auto-flow” ilmainen?

Kyllä – oppitunnin ”Implisiittinen grid ja grid-auto-flow” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Implisiittinen grid ja grid-auto-flow”?

Ymmärtäkää, miten CSS Grid käsittelee eksplisiittisten raitojen ulkopuoliset kohteet implisiittisten rivien ja sarakkeiden avulla. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Implisiittinen grid ja grid-auto-flow”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Nimetyt linjat ja nimetyt grid-alueet
Auto-fit ja auto-fill minmaxilla
Implisiittinen grid ja grid-auto-flow
Subgrid sisäkkäisen sisällön tasaamiseen

← Takaisin: CSS Academy