fr vienība CSS režģos

Režģa rindu un kolonnu izmērus var iestatīt ne tikai px, bet arī elastības vienībās fr (frakcija). Šo vienību izmantošana nozīmē, ka visa elementu izvietošanai paredzētā vieta tiks sadalīta vienādās daļās jeb frakcijās. Katrs elements varēs paņemt noteiktu šī sadalījuma daļu. Apskatīsim, kā tas tiek darīts.

Izmantojot īpašību grid-template-columns panāksim, ka pirmā un otrā režģa kolonna aizņems vienu konteinera daļu, bet trešā kolonna - trīs daļas:

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 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат: