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