Murtolukuyksiköt fr CSS-gridissä
Yksiköissä fr määritetyt arvot
voivat olla murtolukuja. Muutetaan
edellistä esimerkkiä määrittämällä
toisen ja kolmannen sarakkeen leveys
murtolukuina:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Oletetaan, että gridissäsi on kolme saraketta.
Tee niin, että kolmas sarake
on 1.5 kertaa suurempi kuin ensimmäinen
ja toinen.
Oletetaan, että gridissäsi on kolme saraketta.
Tee niin, että toinen sarake
on 1.5 kertaa suurempi kuin ensimmäinen,
ja kolmas sarake on 2.5
kertaa suurempi kuin ensimmäinen.
