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 да ўлчамни белгилайди