Fr mērvienība

Elastības mērvienība fr apzīmē daļu vai frakciju no kopējā izmēra telpā, kurā atrodas elements. fr izmantošanas priekšrocība ir tās pielāgošanās dažādiem konteineriem vai ekrāna izšķirtspējām, jo fr vienkārši sadala visu telpu norādītajā frakciju (daļu) daudzumā bez saistības ar to precīzo izmēru pikseļos.

Piemērs

Izmantosim īpašību grid-template-columns, lai pirmais un otrais režģa kolonna aizņemtu 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>

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

Результат:

Piemērs

Vērtības, kas norādītas fr mērvienībās, var būt daļskaitļi. Mainīsim iepriekšējo piemēru, norādot otrajai un trešajai kolonnai platumu kā daļskaitļus:

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

Результат:

Skatiet arī