Utilisez l'un auto-fillou l' autre auto-fitcomme numéro de répétition de la repeat()notation.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Lorsque auto-fillest donné comme numéro de répétition, si le conteneur de grille a une taille définie ou une taille maximale dans l'axe concerné, alors le nombre de répétitions est le plus grand entier positif possible qui n'entraîne pas le débordement de la grille de son conteneur de grille.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
La grille répétera autant de pistes que possible sans déborder de son conteneur.
Dans ce cas, étant donné l'exemple ci-dessus (voir image) , seules 5 pistes peuvent rentrer dans la grille-conteneur sans déborder. Il n'y a que 4 éléments dans notre grille, donc un cinquième est créé comme une piste vide dans l'espace restant.
Le reste de l'espace restant, la piste n ° 6, termine la grille explicite. Cela signifie qu'il n'y avait pas assez d'espace pour placer une autre piste.
auto-fit
Le auto-fitmot-clé se comporte de la même manière que auto-fill, sauf qu'après l' algorithme de placement des éléments de grille, toutes les pistes vides dans l'espace restant seront réduites en 0.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
La grille répètera toujours autant de pistes que possible sans déborder de son conteneur, mais les pistes vides seront réduites en 0.
Une piste réduite est traitée comme ayant une fonction de dimensionnement de piste fixe de 0px.
Contrairement à l' auto-fillexemple d'image, la cinquième piste vide est réduite, mettant fin à la grille explicite juste après le quatrième élément.
auto-fill contre auto-fit
La différence entre les deux est perceptible lorsque la minmax()fonction est utilisée.
Utilisez minmax(186px, 1fr)pour étendre les éléments de 186pxà 186pxplus une fraction de l'espace restant dans le conteneur de grille.
Lors de l'utilisation auto-fill, les éléments grandiront une fois qu'il n'y aura plus d'espace pour placer des pistes vides.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Lors de l'utilisation auto-fit, les éléments grandissent pour remplir l'espace restant car toutes les pistes vides sont réduites 0px.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Terrain de jeux:
Inspection des pistes à remplissage automatique
Inspection des pistes à ajustement automatique
grid-template-columns: auto auto auto auto;fonctionne dans ce cas? =)