Utilisez soit auto-fill ou auto-fit comme premier argument de la méthode repeat() la notation.
<auto-repeat> variante de la repeat() la notation :
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
auto-fill
Lorsque auto-fill est donné comme le numéro de répétition, si la grille a un définitif taille ou la taille maximale dans l'axe concerné, alors le nombre de répétitions est le plus grand nombre entier positif possible qui ne fait pas déborder la grille de son conteneur.
https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill
.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.
![Using auto-fill as the repetition number of the repeat() notation]()
Dans ce cas, étant donné l'exemple ci-dessus (voir image) Si l'on utilise la grille, seules 5 pistes peuvent être placées dans le conteneur de la grille 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 site auto-fit se comporte de la même manière que auto-fill sauf que qu'après placement des éléments de la grille toutes les pistes répétées vides sont réduites.
https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fit
.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 à 0 .
Une voie effondrée est traitée comme ayant une fonction de dimensionnement de voie fixe de 0px .
![Using auto-fit as the repetition number of the repeat() notation]()
Contrairement à la auto-fill Par exemple, la cinquième piste vide est effondrée, ce qui met fin à la grille explicite juste après le quatrième élément.
auto-fill vs auto-fit
La différence entre les deux est perceptible lorsque les minmax() est utilisée.
Utilisez minmax(186px, 1fr) pour classer les éléments de 186px à un fraction de l'espace restant dans le conteneur de la grille .
Lorsque vous utilisez auto-fill les articles grandiront lorsqu'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>
Lorsque vous utilisez auto-fit les éléments vont s'agrandir pour remplir l'espace restant car toutes les pistes vides seront réduites en 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 de remplissage automatique
![auto-fill]()
Inspection des chenilles auto-fit
![auto-fit]()
2 votes
grid-template-columns: auto auto auto auto;fonctionne dans ce cas ? =)