Fractionele eenheden fr in CSS-grids

Waarden gespecificeerd in eenheden fr kunnen een fractionele vorm aannemen. Laten we het vorige voorbeeld aanpassen door voor de tweede en derde kolom een breedte in fractionele getallen in te stellen:

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: 1fr 0.5fr 2.5fr;
  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 derde kolom 1.5 keer groter is dan de eerste en de tweede.

Задание 2

Stel dat je grid drie kolommen heeft. Zorg ervoor dat de tweede kolom 1.5 keer groter is dan de eerste, en de derde kolom 2.5 keer groter dan de eerste.