Используйте либо, auto-fillлибо auto-fitкак число повторения repeat()записи.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Когда 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>
Сетка будет повторять столько треков, сколько возможно, не переполняя свой контейнер.
В этом случае, учитывая приведенный выше пример (см. Изображение) , только 5 дорожек могут поместиться в грид-контейнер без переполнения. В нашей сетке всего 4 элемента, поэтому пятый создается как пустая дорожка в оставшемся пространстве.
Остальное оставшееся пространство, дорожка № 6, завершает явную сетку. Это означает, что не хватило места для размещения другой дорожки.
auto-fit
auto-fitКлючевое слово ведет себя так же , как auto-fill, за исключением того, что после алгоритма размещения элемент сетки либо пустые дорожки в пределах оставшегося пространства будут свернуты в 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>
Сетка по-прежнему будет повторять столько треков, сколько возможно, не переполняя свой контейнер, но пустые треки будут свернуты в 0 .
Свернутая дорожка рассматривается как имеющая фиксированную функцию определения размера дорожки 0px.
В отличие от auto-fillпримера изображения, пустая пятая дорожка сворачивается, заканчивая явную сетку сразу после 4-го элемента.
auto-fill против auto-fit
Разница между ними заметна при использовании minmax()функции.
Используйте minmax(186px, 1fr)для изменения диапазона элементов от 186pxдо 186pxплюс часть оставшегося пространства в контейнере сетки.
При использовании auto-fillэлементы будут расти, если не будет места для размещения пустых дорожек.
.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>
При использовании auto-fitэлементы будут расти, чтобы заполнить оставшееся пространство, потому что все пустые дорожки свернуты 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>
Игровая площадка:
Проверка треков автозаполнения
Проверка автоподгонки гусениц
grid-template-columns: auto auto auto auto;работает в этом случае? =)