Pixlar och fr-enheter i CSS-grid

Ställa in bredden på kolumnerna kan göras samtidigt i pixlar och 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

Antag att ditt grid har tre kolumner. Gör så att den första kolumnen tar upp 100px, och de övriga två kolumnerna var av samma storlek.

Задание 2

Antag att ditt grid har fyra kolumner. Gör så att den första och sista kolumnerna tar upp 100px, och de återstående kolumnerna delade på det återstående utrymmet så att den tredje kolumnen var 1.5 gånger större än den andra.