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-ებში