Pikseļi un fr vienības CSS režģos

Kolonnu platumu var iestatīt vienlaikus gan pikseļos, gan 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

Pieņemsim, ka jūsu režģī ir trīs kolonnas. Iestatiet to tā, lai pirmā kolonna aizņemtu 100px, bet pārējās divas kolonnas būtu vienāda izmēra.

Задание 2

Pieņemsim, ka jūsu režģī ir četras kolonnas. Iestatiet to tā, lai pirmā un pēdējā kolonna aizņemtu 100px, bet pārējās kolonnas sadalītu atlikušo vietu tā, lai trešā kolonna būtu 1.5 reizes platāka par otro.