Piksel dan Unit fr dalam CSS Grid
Lebar kolom dapat diatur
secara bersamaan 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;
}
:
Misalkan dalam grid Anda ada tiga kolom.
Atur agar kolom pertama
menempati 100px, dan dua kolom
sisanya berukuran sama.
Misalkan dalam grid Anda ada empat kolom.
Atur agar kolom pertama dan terakhir
menempati 100px,
dan kolom sisanya membagi sisa ruang
sehingga kolom ketiga 1.5
kali lebih besar dari kolom kedua.
