Κλασματικές μονάδες fr στα CSS Grids

Οι τιμές που καθορίζονται σε μονάδες fr μπορούν να πάρουν κλασματική μορφή. Ας αλλάξουμε το προηγούμενο παράδειγμα, ορίζοντας για τη δεύτερη και τρίτη στήλη πλάτος σε κλασματικούς αριθμούς:

<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 0.5fr 2.5fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

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