Pixels et unités fr dans les grilles CSS
Il est possible de définir la largeur des colonnes
simultanément en pixels et en
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;
}
:
Supposons que votre grille ait trois colonnes.
Faites en sorte que la première colonne
occupe 100px, et que les deux
colonnes restantes aient la même
taille.
Supposons que votre grille ait quatre colonnes.
Faites en sorte que les première et dernière
colonnes occupent 100px,
et que les colonnes restantes se partagent l'espace
restant de telle sorte que la troisième colonne soit 1.5
fois plus grande que la deuxième.
