Ero sivun ”CSS/Grid” versioiden välillä
Poistettu sisältö Lisätty sisältö
Ei muokkausyhteenvetoa |
|||
Rivi 101:
elementti {
gap: 10px;
}▼
</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>"▼
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>▼
Gridin elementeille annetaan sitten <tt>grid-area</tt>-ominaisuudella alueen nimi, johon elementti tulee.▼
<syntaxhighlight lang="css">▼
main {▼
grid-area: pääsisältö;▼
}
</syntaxhighlight>
Rivi 178 ⟶ 150:
}
</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>"
▲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>
▲Gridin elementeille annetaan sitten <tt>grid-area</tt>-ominaisuudella alueen nimi, johon elementti tulee.
▲<syntaxhighlight lang="css">
▲main {
▲ grid-area: pääsisältö;
▲}
▲</syntaxhighlight>
== Elementtien tasaus ==
| |||