Μονάδα fr

Η μονάδα ευελιξίας fr αντιπροσωπεύει ένα κλάσμα ή ένα μέρος του συνολικού μεγέθους του χώρου στον οποίο βρίσκεται το στοιχείο. Το πλεονέκτημα της χρήσης της fr είναι η προσαρμοστικότητά της σε διαφορετικά περιέκτες ή αναλύσεις οθόνης, καθώς η fr απλώς κατανέμει όλο τον διαθέσιμο χώρο στο καθορισμένο αριθμό κλασμάτων (μερών) χωρίς δεσμό με το ακριβές τους μέγεθος σε pixels.

Παράδειγμα

Ας χρησιμοποιήσουμε την ιδιότητα 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,
που ορίζει το μέγεθος σε pixels
μονάδα em,
που ορίζει το μέγεθος σε em
μονάδα rem,
που ορίζει το μέγεθος σε rem
μονάδα %,
που ορίζει το μέγεθος σε ποσοστά
μονάδα vw,
που ορίζει το μέγεθος σε vw
μονάδα vh,
που ορίζει το μέγεθος σε vh
μονάδα vmax,
που ορίζει το μέγεθος σε vmax
μονάδα vmin,
που ορίζει το μέγεθος σε vmin