Jednotka fr v CSS gridoch

Veľkosti riadkov a stĺpcov v gride je možné nastaviť nielen v px, ale aj v jednotkách flexibility fr (fraction). Použitie týchto jednotiek znamená, že celý priestor na umiestnenie elementov bude rozdelený na rovnaké diely alebo frakcie. Každý element bude môcť zobrať určitú časť tohto rozdelenia. Pozrime sa, ako sa to robí.

Pomocou vlastnosti grid-template-columns urobme tak, aby prvý a druhý stĺpec gridu zabrali jednu časť kontajnera, a tretí stĺpec - tri časti:

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;
}

Результат: