Enota fr v CSS mrežah

Velikosti vrstic in stolpcev v mreži lahko določimo ne le v px, temveč tudi v enotah prožnosti fr (frakcija). Uporaba teh enot pomeni, da bo ves prostor za razporeditev elementov razdeljen na enake dele ali frakcije. Vsak element bo lahko vzel določen del tega razdelka. Poglejmo, kako se to naredi.

Z lastnostjo grid-template-columns naredimo tako, da prvi in drugi stolpec mreže zasedeta en del vsebnika, tretji stolpec pa tri dele:

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

Результат: