Ero sivun ”CSS/Grid” versioiden välillä
Poistettu sisältö Lisätty sisältö
Rivi 15:
[[File:CSS grid 3 columns 3fr 5fr 2fr.svg|thumb|Asettelu kolmeen sarakkeeseen, joiden koot ovat 3 osaa, 5 osaa ja 2 osaa.]]
Sarakkeiden leveydet voi asettaa <tt>grid-template-columns</tt>-arvolla. Sarakkeiden määrä määrytyy arvojen määrän perusteella. Leveydet voi antaa absoluuttisina tai suhteellisina
<syntaxhighlight lang="css">
Rivi 23:
}
</syntaxhighlight>
Grideissä on käytössä myös uusi suhteellinen mitta <tt>fr</tt>, joka tarkoittaa osuutta kokonaismäärästä. Esimerkiksi, jos mitat ovat
<syntaxhighlight lang="css">
#grid {
/* ... */
grid-template-columns: 3fr 5fr
}
</syntaxhighlight>
tulee sarakkeiden leveyksiksi <math>\frac{3}{3 + 5 + 4} = \frac{3}{12}</math> = 25 %, <math>\frac{5}{3 + 5 + 4} = \frac{5}{12}</math> = 41,6 % ja <math>\frac{4}{3 + 5 + 4} = \frac{4}{12}</math> = 33,4 %.
{{Clear}}
|