Ero sivun ”CSS/Grid” versioiden välillä
Poistettu sisältö Lisätty sisältö
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
Vastaavasti ominaisuuksilla <tt>grid-row-start</tt> ja <tt>grid-row-end</tt> asetetaan viivat, joiden välisen alueen elementti täyttää pystytasossa.▼
grid-column-start: 1;▼
grid-column-end: 3;▼
}▼
{{Clear}}▼
▲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">
#
grid-
grid-row
}
#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ä.
▲}
#laatikko-7 {
grid-
▲ grid-row: 2 / 3;
}
</syntaxhighlight>
▲{{Clear}}
Jälkimmäinen arvo voi olla vaihtoehtoisesti <tt>span</tt>-merkinnällä esitetty pituus.▼
▲
<syntaxhighlight lang="css">
|