Μονάδα fr στα CSS Grid

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

Ας χρησιμοποιήσουμε την ιδιότητα grid-template-columns για να κάνουμε την πρώτη και τη δεύτερη στήλη του grid να πάρουν ένα μέρος του container, και την τρίτη στήλη - τρία μέρη:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Ας υποθέσουμε ότι το grid σας έχει δύο στήλες. Κάντε τις να έχουν το ίδιο πλάτος.

Ας υποθέσουμε ότι το grid σας έχει τρεις στήλες. Κάντε τις να έχουν το ίδιο πλάτος.

Ας υποθέσουμε ότι το grid σας έχει τρεις στήλες. Κάντε την τρίτη στήλη να είναι δύο φορές μεγαλύτερη από την πρώτη και τη δεύτερη.