Automaattinen sijoittelu ja grid-auto-flow

CSS Gridissä automaattinen sijoittelualgoritmi määrittää, miten ruudukkokohteet sijoitetaan automaattisesti, kun sijaintia ei määritellä erikseen. Tätä prosessia ohjataan grid-auto-flow-ominaisuudella, joka määrittää, sijoitetaanko kohteet riveittäin vai sarakkeittain, sekä yrittääkö selain täyttää tyhjät tilat tiiviimmin. Oletuksena ruudukkokohteet sijoitetaan rivi-ensisijaisessa järjestyksessä: jokainen kohde täyttää seuraavan vapaan solun nykyisessä rivissä ennen siirtymistä seuraavalle riville. grid-auto-flow-ominaisuuden arvoksi voidaan asettaa row, column tai dense, joista jokainen vaikuttaa asetteluun eri tavoin.

Keskeiset kohdat:

• Automaattinen sijoittelualgoritmi huolehtii kohteiden sijoittelusta, ellei sijaintia määritellä;
• grid-auto-flow-ominaisuus määrittää, sijoitetaanko kohteet riveittäin vai sarakkeittain;
• Käytä dense-avainsanaa tiiviimpään pakkaamiseen täyttämällä aukot, jotka jäävät eksplisiittisten sijoittelujen tai suurempien kohteiden vuoksi;
• Oletuskäyttäytyminen on row-järjestys, jossa jokainen rivi täytetään ennen seuraavaa;
• grid-auto-flow-arvon muuttaminen vaikuttaa siihen, miten ruudukko mukautuu sisältöön ja kohteiden järjestykseen.

Huomio

Vaihtamalla grid-auto-flow: row, grid-auto-flow: column ja grid-auto-flow: row dense vaikuttaa ruudukkokohteiden A–E sijoitteluun, kun yksi kohde (C) on sijoitettu eksplisiittisesti. Kohteiden järjestys ja pakkaus muuttuvat valitun sijoittelutilan mukaan.

Automaattinen sijoittelu ja eksplisiittisesti sijoitetut kohteet

Kun osa kohteista sijoitetaan ruudukkoon eksplisiittisesti esimerkiksi grid-column- tai grid-row-ominaisuuksilla, automaattinen sijoittelualgoritmi ohittaa nämä solut ja jatkaa jäljellä olevien kohteiden sijoittamista seuraaviin vapaisiin paikkoihin. Tämä tarkoittaa, että eksplisiittisesti sijoitetut kohteet voivat jättää ruudukkoon aukkoja, ja automaattisesti sijoitetut kohteet täyttävät vain vapaat solut grid-auto-flow-sääntöjen ja järjestyksen mukaisesti. Jos käytät dense-avainsanaa, selain yrittää täyttää aukot, jotka jäävät eksplisiittisesti sijoitettujen tai suurempien kohteiden vuoksi, pakaten ruudukon tiiviimmin.

Vinkkejä dynaamisiin asetteluihin automaattisijoittelulla

Hyödynnä automaattisijoittelua dynaamisissa tai sisällön ohjaamissa asetteluissa:

• Käytä grid-auto-flow: row perinteiseen, riveittäin etenevään ruudukon täyttöön;
• Vaihda grid-auto-flow: column-asetukseen, kun haluat täyttää sarakkeet ennen rivejä;
• Lisää dense kumpaan tahansa tilaan, jos haluat selaimen täyttävän pienemmät aukot, jotka jäävät eksplisiittisesti sijoitettujen tai suurempien elementtien jälkeen;
• Yhdistä eksplisiittinen sijoittelu erityisille elementeille ja automaattisijoittelu muille, jolloin saat sekä hallintaa että joustavuutta;
• Testaa asetteluasi erilaisilla sisältöjärjestyksillä ja määrillä varmistaaksesi, että ruudukko mukautuu odotetusti.