Unités fractionnaires fr dans les grilles CSS
Les valeurs spécifiées en unités fr
peuvent prendre une forme fractionnaire. Modifions
l'exemple précédent en spécifiant
pour les deuxième et troisième colonnes une largeur
en nombres fractionnaires :
<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;
}
:
Supposons que votre grille ait trois colonnes.
Faites en sorte que la troisième colonne
soit 1.5 fois plus grande que la première
et la deuxième.
Supposons que votre grille ait trois colonnes.
Faites en sorte que la deuxième colonne
soit 1.5 fois plus grande que la première,
et la troisième colonne 2.5
fois plus grande que la première.
