# Единица fr

Единица гибкости `fr` обозначает долю или фракцию от общего размера пространства, в котором находится элемент. Преимуществом использования `fr` является его адаптивность к разным контейнерам или разрешениям экрана, поскольку `fr` просто распределяет все пространство на указанное количество фракций (частей) без привязки к их точному размеру в пикселях.

## Пример

Давайте с помощью свойства `grid-template-columns` сделаем так, чтобы первый и второй столбцы грида заняли одну часть контейнера, а третий столбец - три части:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>` `#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` могут принимать дробный вид. Давайте изменим предыдущий пример, указав для второго и третьего столбца ширину в дробных числах:

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

:

## Смотрите также

- единица `px`,
  которая задает размер в пикселях
- единица `em`,
  которая задает размер в em
- единица `rem`,
  которая задает размер в rem
- единица `%`,
  которая задает размер в процентах
- единица `vw`,
  которая задает размер в vw
- единица `vh`,
  которая задает размер в vh
- единица `vmax`,
  которая задает размер в vmax
- единица `vmin`,
  которая задает размер в vmin

← →
↑
en ru