Pikslji in enote fr v CSS mrežah

Širino stolpcev lahko določimo hkrati v pikslih in 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

Naj ima vaša mreža tri stolpce. Naredite tako, da bo prvi stolpec zasedel 100px, preostala dva stolpca pa naj bosta enake velikosti.

Задание 2

Naj ima vaša mreža štiri stolpce. Naredite tako, da bosta prvi in zadnji stolpec zasedla 100px, preostali stolpci pa naj si razporedijo preostali prostor tako, da bo tretji stolpec 1.5 krat večji od drugega.