Ero sivun ”CSS/Grid” versioiden välillä

Poistettu sisältö Lisätty sisältö
Hunsvotti (keskustelu | muokkaukset)
Hunsvotti (keskustelu | muokkaukset)
Rivi 145:
Viivojen suhteen sijoittelussa gridin ajatellaan koostuvan soluja erottavista viivoista. 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ä.
 
[[File:CSS grid boxgrid-1areas.svg|thumb|Laatikko from2 colon 1ulottu tovaakasuunnassa 3viivojen 2–4 välille ja pystysuunnassa viivojen 1–3 välille.svg|thumb| Laatikko 13 on asetettu ulottumaan vaakasuunnassa viivastaviivojen 13–5 viivaanvälille. 3Laatikko 7 on ulottumaan pystysuunnassa viivojen 2–4 välille. Muut laatikot ulottuvat yhden solun aluelle, koska muuta ei ole sanottu. ]]
 
HilaelementilleGridin elementille annettavilla ominaisuuksilla <tt>grid-column-start</tt> ja <tt>grid-column-end</tt> asetetaan hilaviivatviivat, 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.
<syntaxhighlight lang="css">
#box-1 {
grid-column-start: 1;
grid-column-end: 3;
</syntaxhighlight>
 
ArvoilleOminaisuuksille 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ä.
{{Clear}}
 
[[File:CSS grid box-1 from col 1 to 3 and row 2 to 3.svg|thumb|Laatikko 1 on asetettu ulottumaan vaakasuunnassa viivasta 1 viivaan 3 ja pystysuunnassa viivasta 2 viivaan 3. Muut elementit asettuvat uudelleen dokumenttijärjestyksessä.]]
 
Vastaavasti ominaisuuksilla <tt>grid-row-start</tt> ja <tt>grid-row-end</tt> asetetaan viivat, joiden välisen alueen elementti täyttää pystytasossa.
 
<syntaxhighlight lang="css">
#boxlaatikko-12 {
grid-row-startcolumn: 2 / 4;
grid-row-end: 1 / 3;
}
</syntaxhighlight>
 
#laatikko-3 {
Arvoille 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ä.
grid-column-end: 3 / 5;
grid-row: 23 / 34;
 
#laatikko-7 {
<syntaxhighlight lang="css">
grid-column-start: 1 / 2;
#box-1 {
grid-columnrow: 12 / 34;
grid-row: 2 / 3;
}
</syntaxhighlight>
 
{{Clear}}
Jälkimmäinen arvo voi olla vaihtoehtoisesti <tt>span</tt>-merkinnällä esitetty pituus.
 
JälkimmäinenLyhennysmerkinnän jälkimmäinen arvo voi olla vaihtoehtoisesti <tt>span</tt>-merkinnällä esitetty pituus.
 
<syntaxhighlight lang="css">