Piksel dan Unit fr dalam Grid CSS

Menetapkan lebar lajur boleh dilakukan secara serentak 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

Katakan dalam grid anda terdapat tiga lajur. Lakukan supaya lajur pertama mengambil 100px, dan dua lajur selebihnya mempunyai saiz yang sama.

Задание 2

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.