Fraksjonære enheter fr i CSS-grid

Verdier spesifisert i enheter fr kan ha en brøkverdi. La oss endre forrige eksempel ved å spesifisere for den andre og tredje kolonnen bredde i brøktall:

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

Anta at griddet ditt har tre kolonner. Gjør slik at den tredje kolonnen er 1.5 ganger større enn den første og den andre.

Задание 2

Anta at griddet ditt har tre kolonner. Gjør slik at den andre kolonnen er 1.5 ganger større enn den første, og den tredje kolonnen er 2.5 ganger større enn den første.