Enota fr

Enota prožnosti fr predstavlja delež ali frakcijo skupne velikosti prostora, v katerem se element nahaja. Prednost uporabe fr je njegova prilagodljivost različnim vsebnikom ali ločljivostim zaslona, saj fr preprosto porazdeli ves razpoložljivi prostor na navedeno število frakcij (delov) brez vezave na njihovo natančno velikost v slikovnih pikah.

Primer

Z lastnostjo grid-template-columns naredimo tako, da bosta prvi in drugi stolpec mreže zasedla 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>

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Primer

Vrednosti, podane v enotah fr, lahko zavzamejo tudi ulomke. Spremenimo prejšnji primer tako, da podamo za drugi in tretji stolpec širino v ulomkih:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</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;
}

Результат:

Glejte tudi