Unit Pecahan fr dalam Grid CSS
Nilai yang dinyatakan dalam unit fr,
boleh mengambil bentuk pecahan. Mari
ubah contoh sebelumnya, dengan menyatakan
untuk lajur kedua dan ketiga lebar
dalam nombor 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;
}
:
Katakan dalam grid anda terdapat tiga lajur.
Jadikan supaya lajur ketiga
ialah 1.5 kali lebih besar daripada lajur pertama
dan kedua.
Katakan dalam grid anda terdapat tiga lajur.
Jadikan supaya lajur kedua
ialah 1.5 kali lebih besar daripada lajur pertama,
dan lajur ketiga ialah 2.5
kali lebih besar daripada lajur pertama.
