Jedinica fr

Jedinica fleksibilnosti fr označava udeo ili frakciju od ukupne veličine prostora u kome se element nalazi. Prednost korišćenja fr je njegova prilagodljivost različitim kontejnerima ili rezolucijama ekrana, pošto fr jednostavno raspodeljuje sav prostor na navedeni broj frakcija (delova) bez vezivanja za njihovu tačnu veličinu u pikselima.

Primer

Hajde da pomoću svojstva grid-template-columns učinimo da prva i druga kolona grida zauzmu jedan deo kontejnera, a treća kolona - tri dela:

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

Primer

Vrednosti, navedene u jedinicama fr mogu biti zadate u razlomcima. Hajde da promenimo prethodni primer, zadajući za drugu i treću kolonu širinu u razlomcima:

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

Pogledajte takođe

jedinica px,
koja zadaje veličinu u pikselima
jedinica em,
koja zadaje veličinu u em
jedinica rem,
koja zadaje veličinu u rem
jedinica %,
koja zadaje veličinu u procentima
jedinica vw,
koja zadaje veličinu u vw
jedinica vh,
koja zadaje veličinu u vh
jedinica vmax,
koja zadaje veličinu u vmax
jedinica vmin,
koja zadaje veličinu u vmin