Воҳиди 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 муқаррар мекунад