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