Pixels και μονάδες fr στα CSS Grids

Μπορούμε να ορίσουμε το πλάτος των στηλών ταυτόχρονα σε pixels και 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: 100px 1fr 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

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