Piksel dan Unit fr dalam CSS Grid

Lebar kolom dapat diatur secara bersamaan dalam piksel dan fr:

html<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>

css#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;
}

Результат:

Задание 1

Misalkan dalam grid Anda ada tiga kolom. Atur agar kolom pertama menempati 100px, dan dua kolom sisanya berukuran sama.

Задание 2

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.