CSS/Grid

Gridillä voi asetella elementtejä kaksiuloitteisesti näytölle helposti.

Elementin lapsielementit asetellaan grid-asettelulla, kun sen display-ominaisuudeksi asetetaan arvo grid.

#ruudukko {
    display: grid;
}

Elementit voidaan sijoittaa gridiin gridin muodostavien viivojen perusteella tai viivojen väliin jäävien alueiden perusteella.

Sarakkeiden leveyden asettaminen

Asettelu kolmeen sarakkeeseen, joiden koot ovat 3 osaa, 5 osaa ja 2 osaa.

Sarakkeiden leveydet voi asettaa grid-template-columns-arvolla. Sarakkeiden määrä määrytyy arvojen määrän perusteella. Leveydet voi antaa absoluuttisina tai suhteellisina mittoina. Eri yksiköitä voi käyttää sekaisin.

#ruudukko {
    /* ... */
    grid-template-columns: 30% 50% 20%;
}

Grideissä on käytössä myös uusi suhteellinen mitta fr, joka tarkoittaa osaa kokonaismäärästä. Esimerkiksi, jos mitat ovat

#ruudukko {
    /* ... */
    grid-template-columns: 3fr 5fr 4fr;
}

tulee sarakkeiden leveyksiksi

${\frac {3}{3+5+2}}={\frac {3}{12}}$ = 30 %, ${\frac {5}{3+5+2}}={\frac {5}{10}}$ ≈ 50 % ja ${\frac {2}{3+5+2}}={\frac {2}{10}}$ ≈ 20 %.

Asettelu kahteen sarakkeeseen, joiden koot ovat 2 osaa ja 3 osaa.

Kun sarakkeiden määrä annetaan, määräytyy rivien määrä automaattisesti elementtien määrän mukaan.

#ruudukko {
    /* ... */
    grid-template-columns: 2fr 3fr;
}

Funktiomerkinnällä repeat voi antaa saman leveyden useille sarakkeille. Merkinnälle annetaan ensimmäiseksi parametriksi toistojen määrä ja toiseksi toistettavat leveydet. Siten

grid-template-columns: repeat(3, 1fr)

#ruudukko {
    /* ... */
    grid-template-columns: repeat(3, 1fr);
}

vastaa merkintää

#ruudukko {
    /* ... */
    grid-template-columns: 1fr 1fr 1fr
}

ja

grid-template-columns: repeat(2, 2fr 3fr)

#ruudukko {
    /* ... */
    grid-template-columns: repeat(2, 2fr 3fr);
}

vastaa merkintää

#ruudukko {
    /* ... */
    grid-template-columns: 2fr 3fr 2fr 3fr;
}

Rivien korkeuden asettaminen

Rivien korkeus asetetaan vastaavasti grid-template-rows-ominaisuudella.

grid-template-rows: repeat(6, 15em)

#ruudukko {
    display: grid;
    grid-template-rows: repeat(6, 15em);
}

Asettelualgoritmi luo tarvittaessa uusia rivejä ja sarakkeita automaattisesti. Näille implisiittisille riveille ja sarakkeille voi antaa korkeudet ominaisuuksilla grid-auto-rows ja grid-auto-columns. Arvoja voi antaa yhden, joka tulee tällöin kaikkien rivien korkeudeksi, tai niitä voi antaa useita, jolloin ne kiertävät uusien rivien arvoina.

#ruudukko {
    /* ... */
    grid-auto-rows: 100px;
}

#ruudukko {
    /* ... */
    grid-auto-rows: 50px 100px 75px;
}

Funktiomerkinnällä minmax voi asettaa rivin minimi- ja maksimikorkeuden. Pelkän minimikorkeuden voi asettaa antamalla maksimikorkeudeksi auto.

#ruudukko {
    /* ... */
    grid-auto-rows: minmax(100px, auto)
}

Elementtien väli

Hilan elementtien keskinäinen vaakasuuntainen väli asetetaan column-gap- ja pystysuuntainen row-gap-ominaisuudella. Yhteisen välin voi asettaa gap-ominaisuudella.

#ruudukko {
    /* ... */
    gap: 10px;
}

Elementtien järjestely

Oletuksena elementit järjestyvät hilaan samaan siinä järjestyksessä, jossa ne ovat dokumentissa. Elementit voi kuitenkin sijoittaa myös mielivaltaisessa järjestyksessä. Tämän voi tehdä muutamalla eri tavalla.

Asettelu viivojen mukaan

Viivojen suhteen sijoittelussa gridin ajatellaan koostuvan soluja erottavista viivoista, jotka numeroidaan 1:stä alkaen. Viivojen laskusuunta riippuu dokumentin kielestä. Vasemmalta oikealle luettavilla kielillä ensimmäinen pystyviiva on gridin vasen reuna, toinen viiva on ensimmäisen solun oikea reuna ja niin edelleen. Viivoja on siis yksi enemmän kuin soluja rivillä tai sarakkeessa. Viivoihin voidaan viitata numerolla tai nimellä. Negatiivisilla numeroilla voidaan viitata viivoihin lopusta lukien. Esimerkiksi -1 on viimeinen viiva.

Laatikko 2 on ulottu vaakasuunnassa viivojen 2–4 välille ja pystysuunnassa viivojen 1–3 välille. Laatikko 3 on asetettu ulottumaan vaakasuunnassa viivojen 3–5 välille. Laatikko 7 on ulottumaan pystysuunnassa viivojen 2–4 välille. Muut laatikot ulottuvat yhden solun aluelle, koska muuta ei ole sanottu.

Gridin elementille annettavilla ominaisuuksilla grid-column-start ja grid-column-end asetetaan viivat, joiden välisen alueen elementti täyttää vaakatasossa.

Vastaavasti ominaisuuksilla grid-row-start ja grid-row-end asetetaan viivat, joiden välisen alueen elementti täyttää pystytasossa.

Ominaisuuksille voi käyttää lyhennysmerkintöjä grid-column ja grid-row. Lyhennysmerkintää käytettäessä alku- ja loppuviiva erotetaan /-merkillä. Viivat voi antaa järjestysnumerolla tai nimellä.

#laatikko-2 {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
}

#laatikko-3 {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}

#laatikko-7 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}

Lyhennysmerkinnän jälkimmäinen arvo voi olla vaihtoehtoisesti span-merkinnällä esitetty pituus.

#laatikko-1 {
  grid-column: 1 / span(2);
}

Jos elementti ulottuu vain yhden viivojen välin, voidaan loppukohta ja pituusmerkintä jättää pois.

Asettelu alueiden mukaan

Elemtti voidaan sijoittaa tiettyyn kohtaan myös alueen mukaan. Alue ilmoitetaan antamalla sen rajaavat vaaka- ja pystyviivat /-merkeillä erotettuna seuraavassa järjestyksessä:

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

#laatikko-1 {
    grid-area: 2 / 1 / 3 / 3;
}

Nimetyt alueet

Ominaisuudella grid-template-areas voi asettaa voi täyttää hilan nimetyillä elementeillä. Jokaista gridin riviä vastaa yksi "-merkeillä ympäröity merkkijono. Merkkijonon sisällä on jokaiselle sarakkeelle oma sanansa välilyönnillä erotettuna.

"<nimi> <nimi> <nimi>"
"<nimi> <nimi> <nimi>"

Nimi toistetaan kaikissa niissä kohdissa jonka soluun kyseinen elementti tulee. Tyhjää kohtaa voidaan merkitä pisteellä (.).

Esimerkiksi seuraava koodi tuottaa kolmisarakkeisen ja nelirivisen gridin.

#ruudukko {
    display: grid;
    grid-template-areas: "header header"
                         "navigation right"
                         "main right"
                         "footer footer";
     grid-template-columns: 2fr 1fr;
}

Gridin elementeille annetaan sitten grid-area-ominaisuudella alueen nimi, johon elementti tulee.

main {
    grid-area: main;
}

Huomaa, että tässä alueen nimi on sama kuin elementin nimi, mutta niin ei tarvitse olla, vaan elemettien ja alueiden nimet ovat erillisiä.

Yllä oleva grid on jaettu kahteen sarakkeeseen, joista toinen on kaksi kertaa isompi kuin toinen. Vaihtoehtoisesti voisi elementit ulottaa kahdelle alueelle.

#ruudukko {
    /* ... */
    grid-template-areas: "header header header"
                         "navigation navigation right"
                         "main main right"
                         "main main right"
                         "footer footer footer";
}

Elementtien tasaus

Ominaisuuksilla align-content, justify-content ja align-items ja justify-items määrätään gridin elementtien tasaus solun suhteen. Align-alkuiset arvot asettavat pystysuuntaisen, justify-alkuiset vaakasuuntaisen ominaisuuden.

Oletusarvot, ilman tasauksia

#ruudukko {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}

justify-items: start

elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    justify-items: start;
}

justify-items: center

elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    justify-items: center;
}

justify-items: end

elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    justify-items: end;
}

align-items: start

elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    align-items: start;
}

align-items: center

elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    align-items: center;
}

align-items: end

elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    align-items: end;
}

Ominaisuudet voi asettaa yksittäin solun elementeille ominaisuuksilla xxx.