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

Poistettu sisältö Lisätty sisältö
Hunsvotti (keskustelu | muokkaukset)
Hunsvotti (keskustelu | muokkaukset)
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 arvoina (esimmittoina. prosentteina <tt>%</tt>Eri taiyksiköitä osinavoi kokonaismäärästäkäyttää <tt>fr</tt>)sekaisin.
 
<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 2fr4fr;
}
</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}}