repeat()
Повторяет дорожки сетки, чтобы не выписывать их по одной.
Синтаксис
repeat(count, size)Параметры
| Параметр | Тип | Описание |
|---|---|---|
| count | integer | auto-fill | auto-fit | Число или `auto-fill` / `auto-fit` — сколько поместится. |
| size | track size | Размер каждой дорожки или шаблон: `repeat(2, 100px 1fr)`. |
Примеры
Четыре равные колонки:
<style>
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.grid div { padding: 8px; background: lightskyblue; }
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div></div>auto-fill оставляет пустые колонки, auto-fit растягивает на них элементы:
<style>
.grid { display: grid; gap: 6px; }
.fill { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.fit { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.grid div { padding: 8px; background: palegreen; }
</style>
<div class="grid fill"><div>auto-fill</div><div>2</div></div>
<p></p>
<div class="grid fit"><div>auto-fit</div><div>2</div></div>Примечания
repeat() работает только в grid-template-columns и grid-template-rows.
См. также
- grid-template-columns — Количество и ширина колонок сетки.
- minmax() — Размер дорожки сетки между минимумом и максимумом.
Вопросы и ответы по теме
В учебнике
- Grid — Сетка CSS Grid — колонки и строки, единица fr, функции repeat и minmax, промежутки и адаптивная сетка без медиазапросов.