Pikselit ja fr-yksiköt CSS-gridissä

Sarakkeiden leveyttä voidaan määrittää samanaikaisesti pikseleinä ja fr-yksiköinä:

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

Oletetaan, että gridissäsi on kolme saraketta. Tee niin, että ensimmäinen sarake vie 100px tilaa, ja loput kaksi saraketta ovat samankokoisia.

Задание 2

Oletetaan, että gridissäsi on neljä saraketta. Tee niin, että ensimmäinen ja viimeinen sarakkeet vievät 100px tilaa, ja loput saraket jakavat jäljellä olevan tilan niin, että kolmas sarake on 1.5 kertaa suurempi kuin toinen.