Единица fr для размеров в CSS
Единица гибкости 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