Функція repeat у CSS Grid

Вивчаємо використання функції repeat() для скорочення запису однакових колонок у CSS Grid.

Функція repeat() у CSS Grid

Якщо у Grid є декілька колонок з однаковою шириною, можна скоротити запис за допомогою функції repeat().

Функція repeat() приймає два параметри: перший — кількість повторень, другий — розмір колонки.

/* Звичайний запис */
#parent {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr;
}

/* Скорочений запис */
#parent {
  display: grid;

  grid-template-columns: repeat(3, 1fr);
}

#parent {
  display: grid;

  grid-template-columns: repeat(3, 1fr) 2fr;
}

#parent {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr)
    repeat(3, 2fr);
}

#parent {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr)
    3fr
    repeat(3, 2fr);
}

/* Звичайний запис */
#parent {
  display: grid;

  grid-template-columns:
    200px 200px 200px;
}

/* Скорочений запис */
#parent {
  display: grid;

  grid-template-columns:
    repeat(3, 200px);
}

❗ Важливо:

repeat() робить CSS Grid більш читабельним та зменшує кількість однакового коду.

repeat(3, 1fr) створює три однакові колонки.
У repeat() перше число — кількість повторень.
Друге значення — розмір кожної повторюваної колонки.
repeat() можна комбінувати з px, %, fr та іншими одиницями.

📌 Завдання:

№1. Створіть 4 колонки однакового розміру за допомогою repeat().
№2. Створіть 4 колонки розміром 100px та ще 3 колонки розміром 2fr.
№3. Створіть 2 колонки по 100px.
№4. Додайте 3 колонки по 200px.
№5. Додайте одну колонку розміром 1fr.
№6. Додайте 2 колонки розміром 10%.

💡 Показати підказку

Групи однакових колонок можна записувати через repeat(кількість, розмір).

✅ Показати відповідь

/* №1 */
grid-template-columns: repeat(4, 1fr);

/* №2 */
grid-template-columns:
  repeat(4, 100px)
  repeat(3, 2fr);

/* №3 */
grid-template-columns:
  repeat(2, 100px)
  repeat(3, 200px)
  1fr
  repeat(2, 10%);