Pikselit ja fr-yksiköt CSS-gridissä
Sarakkeiden leveyttä voidaan määrittää
samanaikaisesti pikseleinä ja
fr-yksiköinä:
<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: 100px 1fr 50px;
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ä ensimmäinen sarake
vie 100px tilaa, ja loput
kaksi saraketta ovat samankokoisia.
Oletetaan, että gridissäsi on neljä saraketta.
Tee niin, että ensimmäinen ja viimeinen
sarakkeet vievät 100px tilaa,
ja loput saraket jakavat jäljellä olevan
tilan niin, että kolmas sarake on 1.5
kertaa suurempi kuin toinen.
