Единица fr

Единицата за гъвкавост fr означава част или фракция от общия размер на пространството, в което се намира елементът. Предимството на използването на fr е неговата адаптивност към различни контейнери или резолюции на екрана, тъй като fr просто разпределя цялото пространство на посочения брой фракции (части) без връзка с точния им размер в пиксели.

Пример

Нека със свойството grid-template-columns направим така, че първата и втората колона на грида да заемат една част от контейнера, а третата колона - три части:

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

Результат:

Пример

Стойностите, посочени в единици fr могат да приемат дробен вид. Нека променим предишния пример, като посочим за втората и третата колона ширина в дробни числа:

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

Результат:

Вижте също