L'unité fr dans les grilles CSS

Les dimensions des rangées et des colonnes dans une grille peuvent être définies non seulement en px, mais aussi en unités de flexibilité fr (fraction). L'utilisation de ces unités signifie que tout l'espace disponible pour le placement des éléments sera divisé en parts égales ou fractions. Chaque élément pourra prendre une certaine partie de cette division. Voyons comment cela se fait.

Utilisons la propriété grid-template-columns pour faire en sorte que les première et deuxième colonnes de la grille occupent une partie du conteneur, et la troisième colonne - trois parties :

<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;
}

Supposons que votre grille ait deux colonnes. Faites en sorte qu'elles aient la même largeur.

Supposons que votre grille ait trois colonnes. Faites en sorte qu'elles aient la même largeur.

Supposons que votre grille ait trois colonnes. Faites en sorte que la troisième colonne soit deux fois plus grande que la première et la deuxième.