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

Poistettu sisältö Lisätty sisältö
Hunsvotti (keskustelu | muokkaukset)
Hunsvotti (keskustelu | muokkaukset)
Rivi 105:
 
== 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>"
 
Nimi toistetaan kaikissa niissä kohdissa jonka soluun kyseinen elementti tulee.
 
Esimerkiksi seuraava koodi tuottaa kolmisarakkeisen ja nelirivisen gridin.
 
<syntaxhighlight lang="css">
#grid {
grid-template-areas: "yläpalkki yläpalkki yläpalkki"
"navigointi pääsisältö pääsisältö"
"sivusisältö pääsisältö pääsisältö"
"alapalkki alapalkki alapalkki";
}
</syntaxhighlight>
 
== Elementtien järjestely ==