Lähdekoodi sivulle CSS/Grid


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

Elementin lapsielementit asetellaan grid-asettelulla, kun sen <tt>display</tt>-ominaisuudeksi asetetaan arvo <tt>grid</tt>.

<syntaxhighlight lang="css">
#ruudukko {
    display: grid;
}
</syntaxhighlight>

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

== Sarakkeiden leveyden asettaminen ==
[[File:CSS grid 3 columns 3fr 5fr 2fr.svg|thumb|Asettelu kolmeen sarakkeeseen, joiden koot ovat 3 osaa, 5 osaa ja 2 osaa.]]

Sarakkeiden leveydet voi asettaa <tt>grid-template-columns</tt>-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. 

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-template-columns: 30% 50% 20%;
}
</syntaxhighlight>

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

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-template-columns: 3fr 5fr 4fr;
}
</syntaxhighlight>

tulee sarakkeiden leveyksiksi 

<math>\frac{3}{3 + 5 + 2} = \frac{3}{12}</math> = 30 %, <math>\frac{5}{3 + 5 + 2} = \frac{5}{10}</math> ≈ 50 % ja <math>\frac{2}{3 + 5 + 2} = \frac{2}{10}</math> ≈ 20 %.

{{Clear}}

[[File:CSS grid 2 columns 2fr 3fr.svg|thumb|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.

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-template-columns: 2fr 3fr;
}
</syntaxhighlight>

{{Clear}}

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

[[File:CSS Grid grid-template-columns repeat(3, 1fr).svg|thumb|grid-template-columns: repeat(3, 1fr)]]

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-template-columns: repeat(3, 1fr);
}
</syntaxhighlight>

vastaa merkintää

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-template-columns: 1fr 1fr 1fr
}
</syntaxhighlight>

ja 

[[File:CSS Grid grid-template-columns repeat(2, 2fr 3fr).svg|thumb|grid-template-columns: repeat(2, 2fr 3fr)]]

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-template-columns: repeat(2, 2fr 3fr);
}
</syntaxhighlight>

vastaa merkintää

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-template-columns: 2fr 3fr 2fr 3fr;
}
</syntaxhighlight>

== Rivien korkeuden asettaminen ==
Rivien korkeus asetetaan vastaavasti <tt>grid-template-rows</tt>-ominaisuudella.

[[File:CSS Grid grid-template-rows repeat.svg|thumb|grid-template-rows: repeat(6, 15em)]]

<syntaxhighlight lang="css">
#ruudukko {
    display: grid;
    grid-template-rows: repeat(6, 15em);
}
</syntaxhighlight>

Asettelualgoritmi luo tarvittaessa uusia rivejä ja sarakkeita automaattisesti. Näille ''implisiittisille'' riveille ja sarakkeille voi antaa korkeudet ominaisuuksilla <tt>grid-auto-rows</tt> ja <tt>grid-auto-columns</tt>. 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.

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-auto-rows: 100px;
}
</syntaxhighlight>

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-auto-rows: 50px 100px 75px;
}
</syntaxhighlight>

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

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-auto-rows: minmax(100px, auto)
}
</syntaxhighlight>

== Elementtien väli ==
Hilan elementtien keskinäinen vaakasuuntainen väli asetetaan <tt>column-gap</tt>- ja pystysuuntainen <tt>row-gap</tt>-ominaisuudella. Yhteisen välin voi asettaa <tt>gap</tt>-ominaisuudella.

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    gap: 10px;
}
</syntaxhighlight>

== 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 ===
[[Kuva:CSS grid lines.svg|center]]

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.

[[File:CSS grid grid-areas.svg|thumb|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 <tt>grid-column-start</tt> ja <tt>grid-column-end</tt> asetetaan viivat, joiden välisen alueen elementti täyttää vaakatasossa. 

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

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

<syntaxhighlight lang="css">
#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;
}
</syntaxhighlight> 

{{Clear}}

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

<syntaxhighlight lang="css">
#laatikko-1 {
  grid-column: 1 / span(2);
}
</syntaxhighlight>

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ä:
* <tt>grid-row-start</tt>
* <tt>grid-column-start</tt>
* <tt>grid-row-end</tt>
* <tt>grid-column-end</tt>

<syntaxhighlight lang="css">
#laatikko-1 {
    grid-area: 2 / 1 / 3 / 3;
}
</syntaxhighlight>

=== Nimetyt alueet ===
Ominaisuudella <tt>grid-template-areas</tt> 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>"


[[File:CSS grid grid-area.svg|thumb|]]

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

Esimerkiksi seuraava koodi tuottaa kolmisarakkeisen ja nelirivisen gridin.

<syntaxhighlight lang="css">
#ruudukko {
    display: grid;
    grid-template-areas: "header header"
                         "navigation right"
                         "main right"
                         "footer footer";
     grid-template-columns: 2fr 1fr;
}
</syntaxhighlight>

Gridin elementeille annetaan sitten <tt>grid-area</tt>-ominaisuudella alueen nimi, johon elementti tulee.

<syntaxhighlight lang="css">
main {
    grid-area: main;
}
</syntaxhighlight>

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.

[[File:CSS grid grid-area (alternative).svg|thumb|]]

<syntaxhighlight lang="css">
#ruudukko {
    /* ... */
    grid-template-areas: "header header header"
                         "navigation navigation right"
                         "main main right"
                         "main main right"
                         "footer footer footer";
}
</syntaxhighlight>

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

[[File:CSS grid layout default.svg|thumb|Oletusarvot, ilman tasauksia]]

<syntaxhighlight lang="css">
#ruudukko {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}
</syntaxhighlight>

{{Clear}}

[[File:CSS grid layout with justify-items start.svg|thumb|<tt>justify-items: start</tt>]]

<syntaxhighlight lang="css">
elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    justify-items: start;
}
</syntaxhighlight>

{{Clear}}

[[File:CSS grid layout default with justify-items center.svg|thumb|<tt>justify-items: center</tt>]]

<syntaxhighlight lang="css">
elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    justify-items: center;
}
</syntaxhighlight>

{{Clear}}

[[File:CSS grid layout default with justify-items end.svg|thumb|<tt>justify-items: end</tt>]]

<syntaxhighlight lang="css">
elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    justify-items: end;
}
</syntaxhighlight>

{{Clear}}

[[File:CSS grid layout with align items start.svg|thumb|<tt>align-items: start</tt>]]

<syntaxhighlight lang="css">
elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    align-items: start;
}
</syntaxhighlight>

{{Clear}}

[[File:CSS grid layout with align-items center.svg|thumb|<tt>align-items: center</tt>]]

<syntaxhighlight lang="css">
elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    align-items: center;
}
</syntaxhighlight>

{{Clear}}

[[File:CSS grid layout with align items end.svg|thumb|<tt>align-items: end</tt>]]

<syntaxhighlight lang="css">
elementti {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    align-items: end;
}
</syntaxhighlight>

{{Clear}}


Ominaisuudet voi asettaa yksittäin solun elementeille ominaisuuksilla <tt>xxx</tt>.