Piksler og fr-enheter i CSS-grid

Å sette bredden på kolonnene kan gjøres samtidig i piksler og 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

La oss si at griddet ditt har tre kolonner. Gjør slik at den første kolonnen tar 100px, og de andre to kolonnene har samme størrelse.

Задание 2

La oss si at griddet ditt har fire kolonner. Gjør slik at den første og siste kolonnen tar 100px, og de andre kolonnene deler det gjenværende plassen slik at den tredje kolonnen er 1.5 ganger større enn den andre.