Unit Fraksional fr dalam Grid CSS
Nilai yang ditentukan dalam unit fr
dapat berbentuk pecahan. Mari
ubah contoh sebelumnya dengan menentukan
lebar kolom kedua dan ketiga
dalam bilangan pecahan:
<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;
}
:
Misalkan dalam grid Anda ada tiga kolom.
Buatlah agar kolom ketiga
1.5 kali lebih besar dari kolom pertama
dan kedua.
Misalkan dalam grid Anda ada tiga kolom.
Buatlah agar kolom kedua
1.5 kali lebih besar dari kolom pertama,
dan kolom ketiga 2.5
kali lebih besar dari kolom pertama.
