Piksel dan Unit fr dalam Grid CSS
Menetapkan lebar lajur boleh dilakukan
secara serentak dalam piksel dan
fr:
<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;
}
:
Katakan dalam grid anda terdapat tiga lajur.
Lakukan supaya lajur pertama
mengambil 100px, dan dua lajur
selebihnya mempunyai saiz yang sama.
Katakan dalam grid anda terdapat empat lajur.
Lakukan supaya lajur pertama dan terakhir
mengambil 100px,
dan lajur selebihnya membahagikan ruang yang
tinggal supaya lajur ketiga adalah 1.5
kali lebih besar daripada lajur kedua.
