Как работает функция repeat в CSS гридах для упрощения записи?

Функция repeat() в CSS Grid работает для упрощения записи при создании большого количества столбцов или строк. www.8host.com Она позволяет сделать правила короче и понятнее. www.8host.com

Функция принимает два аргумента, разделённых запятой: www.sitepoint.com

1. Первое значение — это количество повторений. www.8host.com Оно может быть числом (например, 1, 2, 3) или ключевыми словами auto-fit или auto-fill. www.sitepoint.com Числовое значение задаёт конкретное количество дорожек, а auto-fit и auto-fill позволяют изменять количество дорожек в зависимости от доступного пространства. www.sitepoint.com
2. Второе значение — это размер повторяющихся дорожек сетки. www.8host.com Для этого аргумента можно использовать значения длины в единицах fr, px, em, % и ch. www.sitepoint.com

Например, вместо записи grid-template-columns: 1fr 1fr 1fr 1fr 1fr; можно написать grid-template-columns: repeat(5, 1fr);. www.sitepoint.com В этом примере функция repeat() позволяет указать, сколько колонок нужно (5) и какой они должны быть ширины (1fr — одна доля доступного пространства). www.sitepoint.com