css.in.ua
Підтримати

CSS function repeat()

Опис

Функція repeat() у CSS представляє собою інструмент для скорочення та оптимізації коду при вказівці повторюваних значень. Ця функція дозволяє задати кількість повторень та значення, яке має бути повторене, забезпечуючи тим самим чистоту та зрозумілість коду. Ідеально підходить для роботи з сітками та флексбоксами, repeat() може значно полегшити життя розробників.

Ось як вона працює на практиці:

grid-template-columns: repeat(4, 100px);

Ця одна стрічка еквівалентна наступному коду:

grid-template-columns: 100px 100px 100px 100px;

Тобто, використовуючи функцію repeat(), ви можете легко змінити кількість повторень або значення в одному місці, замість модифікації кожного окремого значення. Це економить час та робить код більш читабельним.

Ось деякі інші приклади значень, які можна використовувати:

  • repeat(2, auto 100px), що дорівнює auto 100px auto 100px;
  • repeat(3, minmax(100px, 200px)), що дорівнює minmax(100px, 200px) minmax(100px, 200px) minmax(100px, 200px).
Нотатка:

Використовуючи різні комбінації значень, ви можете створити багато різних шаблонів для сіток та флексбоксів. Функція repeat() пропонує гнучкість і контроль, які можуть поліпшити якість вашого коду та допомогти створити візуально привабливі та зручні для користувача інтерфейси.
Порада:

Використовуйте repeat() разом з іншими функціями та одиницями вимірювання, наприклад minmax(), щоб створити більш гнучкі та динамічні розташування.

Синтаксис

repeat(<count-repeat>, <value>);
<value>

Це значення, яке буде повторюватися. Це може бути будь-яке припустиме значення CSS для властивості, яку ви використовуєте.

<count-repeat>

Це число, яке визначає кількість разів, які значення будуть повторені. Може бути додатнім цілим числом або виразом, що обчислюється в додатнє ціле число.

Переглядачі

Переглядач

57

76

10.1

44

16
Переглядач

57

57

79

10.3

Мобільних переглядачів ще не додано.

Приклади


Контейнер з використанням функції repeat().

Документи

Зв'язок