Јединица 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