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

Poistettu sisältö Lisätty sisältö
Hunsvotti (keskustelu | muokkaukset)
Ei muokkausyhteenvetoa
Hunsvotti (keskustelu | muokkaukset)
 
Rivi 143:
 
=== Asettelu viivojen mukaan ===
[[Kuva:CSS grid lines.svg|center]]
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ä.
 
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. ]]