Pixels en fr-eenheden in CSS grids

De breedte van kolommen kan tegelijkertijd in pixels en fr worden ingesteld:

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

Stel dat je grid drie kolommen heeft. Zorg ervoor dat de eerste kolom 100px inneemt, en de overige twee kolommen even groot zijn.

Задание 2

Stel dat je grid vier kolommen heeft. Zorg ervoor dat de eerste en laatste kolommen 100px innemen, en de overige kolommen de resterende ruimte verdelen, zodat de derde kolom 1.5 keer groter is dan de tweede.