La signification de auto-fill dans les grilles CSS
Pour définir la taille de colonnes identiques dans un conteneur de grille,
il est très pratique d'utiliser la valeur auto-fill
dans la fonction repeat, grâce à laquelle
notre conteneur se remplira de colonnes identiques
de la largeur que nous souhaitons.
Créons un tableau de huit éléments et
définissons une largeur identique pour chaque colonne de 200px.
Laissons la valeur auto-fill calculer
automatiquement le nombre nécessaire de colonnes :
<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>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Définissez la largeur de la colonne sur 200px.
Modifiez la largeur du parent et
observez comment le nombre
de colonnes change.
