Використовуйте 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;чи працює в цьому випадку? =)