fr Birimi

Esneklik birimi fr bir öğenin bulunduğu alanın toplam boyutundan bir payı veya fraksiyonu temsil eder. fr kullanmanın avantajı, farklı konteynerlere veya ekran çözünürlüklerine uyum sağlamasıdır, çünkü fr, piksel cinsinden kesin boyutlarına bağlı kalmadan tüm alanı belirtilen fraksiyon (parça) sayısına böler.

Örnek

grid-template-columns özelliğini kullanarak grid'in birinci ve ikinci sütunlarının konteynerin bir kısmını, üçüncü sütunun ise üç kısmını kaplamasını sağlayalım:

<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;
}

Örnek

fr birimlerinde belirtilen değerler kesirli olabilir. Bir önceki örneği değiştirerek ikinci ve üçüncü sütunların genişliğini kesirli sayılarla belirtelim:

<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;
}

Ayrıca Bakınız

boyutu piksel cinsinden belirleyen px birimi,
boyutu em cinsinden belirleyen em birimi,
boyutu rem cinsinden belirleyen rem birimi,
boyutu yüzde cinsinden belirleyen % birimi,
boyutu vw cinsinden belirleyen vw birimi,
boyutu vh cinsinden belirleyen vh birimi,
boyutu vmax cinsinden belirleyen vmax birimi,
boyutu vmin cinsinden belirleyen vmin birimi,