fr vahidi

fr elastiklik vahidi elementin yerləşdiyi ümumi məkanın hissəsini və ya payını ifadə edir. fr istifadəsinin üstünlüyü müxtəlif konteynerlərə və ya ekran ölçülərinə uyğunlaşa bilməsidir, çünki fr bütün məkanı göstərilən hissə sayına piksel cinsinden dəqiq ölçüsü ilə əlaqələndirmədən paylayır.

Nümunə

Gəlin grid-template-columns xassəsindən istifadə edərək, gridin birinci və ikinci sütunlarının konteynerin bir hissəsini, üçüncü sütunun isə üç hissəsini tutmasını təmin edək:

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

Nümunə

fr vahidlərində göstərilən dəyərlər kəsr şəklində ola bilər. Gəlin əvvəlki nümunəni ikinci və üçüncü sütunların enini kəsr ədədlərində göstərməklə dəyişək:

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

Həmçinin bax

ölçünü piksel ilə təyin edən px vahidi,
ölçünü em ilə təyin edən em vahidi,
ölçünü rem ilə təyin edən rem vahidi,
ölçünü faiz ilə təyin edən % vahidi,
ölçünü vw ilə təyin edən vw vahidi,
ölçünü vh ilə təyin edən vh vahidi,
ölçünü vmax ilə təyin edən vmax vahidi,
ölçünü vmin ilə təyin edən vmin vahidi,