Функция repeat(): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Эта серия упражнений поможет вам освоить использование функции `repeat()` в CSS Grid Layout. Функция `repeat()` позволяет эффективно определять повторяющиеся шаблоны для строк и столбцов сетки, делая код более компактным и читаемым. Вы попрактикуетесь в создании сеток с фиксированным и автоматическим количеством треков, используя различные параметры `repeat()`, включая ключевые слова `auto-fill` и `auto-fit`. Задания построены от простого к сложному, чтобы вы могли постепенно углубить свои знания и навыки.

Список тем

Основы repeat(): Фиксированное количество колонок

Создайте простую сетку из трех равных колонок. Используйте функцию `repeat()` для задания количества повторений и размера трека. Вам нужно вписать саму функцию `repeat` в соответствующее место.

CSS

.grid-container {
  display: grid;
  grid-template-columns: input1(3, 1fr);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 100px; /* Для наглядности */
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #388E3C;
}

                     .grid-container {
  display: grid;
  grid-template-columns: input1(3, 1fr);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 100px; /* Для наглядности */
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #388E3C;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Функция `repeat()` используется внутри свойств `grid-template-columns` или `grid-template-rows`. Она принимает два основных аргумента: количество повторений и размер трека (или шаблон треков). В данном случае нужно указать количество '3' и размер '1fr'. Вам нужно вставить ключевое слово `repeat`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Repeat(): Указание количества повторений

Задайте сетку, которая будет состоять ровно из четырех колонок одинаковой ширины (используя единицу `fr`). Вам необходимо указать правильное число повторений внутри функции `repeat()`.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(input1, 1fr);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 100px;
}

.grid-item {
  background-color: #2196F3;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #1976D2;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(input1, 1fr);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 100px;
}

.grid-item {
  background-color: #2196F3;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #1976D2;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

Первый аргумент функции `repeat()` определяет, сколько раз должен повториться указанный шаблон трека (второй аргумент). В данном задании требуется четыре колонки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Repeat(): Указание размера трека

Создайте сетку из двух колонок. Каждая колонка должна занимать равную часть доступного пространства контейнера. Вам нужно указать правильный размер трека во втором аргументе функции `repeat()`.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, input1);
  gap: 5px;
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  min-height: 150px;
}

.grid-item {
  background-color: #FF9800;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #F57C00;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, input1);
  gap: 5px;
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  min-height: 150px;
}

.grid-item {
  background-color: #FF9800;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #F57C00;
}

HTML

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
</div>

Второй аргумент функции `repeat()` задает размер или шаблон треков, которые нужно повторить. Чтобы колонки занимали равную часть доступного пространства, используйте единицу `fr` (fraction).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Repeat() для строк

Используйте функцию `repeat()` для создания сетки с тремя строками одинаковой высоты. Каждая строка должна иметь высоту 60px. Вам нужно правильно применить `repeat()` к свойству, отвечающему за строки.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Колонки уже заданы */
  input1: repeat(3, 60px);
  gap: 10px;
  background-color: #eef;
  padding: 10px;
  border: 1px solid #ccf;
  height: 220px; /* Высота контейнера для наглядности */
}

.grid-item {
  background-color: #9C27B0;
  color: white;
  padding: 10px;
  text-align: center;
  border: 1px solid #7B1FA2;
  display: flex; /* Для центрирования */
  align-items: center; /* Для центрирования */
  justify-content: center; /* Для центрирования */
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Колонки уже заданы */
  input1: repeat(3, 60px);
  gap: 10px;
  background-color: #eef;
  padding: 10px;
  border: 1px solid #ccf;
  height: 220px; /* Высота контейнера для наглядности */
}

.grid-item {
  background-color: #9C27B0;
  color: white;
  padding: 10px;
  text-align: center;
  border: 1px solid #7B1FA2;
  display: flex; /* Для центрирования */
  align-items: center; /* Для центрирования */
  justify-content: center; /* Для центрирования */
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Функция `repeat()` работает не только для `grid-template-columns`, но и для `grid-template-rows`. Укажите нужное количество строк и их фиксированную высоту.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Repeat() с auto-fill

Создайте адаптивную сетку. Колонки должны иметь минимальную ширину 100px и автоматически заполнять доступное пространство контейнера, создавая столько колонок, сколько поместится. Используйте ключевое слово `auto-fill` в функции `repeat()`.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(input1, minmax(100px, 1fr));
  gap: 15px;
  background-color: #f0fff0;
  padding: 10px;
  border: 1px solid #90ee90;
  min-height: 150px;
}

.grid-item {
  background-color: #32CD32;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #228B22;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(input1, minmax(100px, 1fr));
  gap: 15px;
  background-color: #f0fff0;
  padding: 10px;
  border: 1px solid #90ee90;
  min-height: 150px;
}

.grid-item {
  background-color: #32CD32;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #228B22;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

Ключевое слово `auto-fill` в качестве первого аргумента `repeat()` указывает браузеру создавать столько треков указанного размера, сколько поместится в контейнере. Используйте `minmax(100px, 1fr)` как размер трека для адаптивности.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Repeat() с auto-fit

Создайте адаптивную сетку, похожую на предыдущее задание, но с использованием `auto-fit`. Колонки также должны иметь минимальную ширину 80px и растягиваться, чтобы заполнить доступное пространство. Обратите внимание на разницу в поведении по сравнению с `auto-fill`, когда элементов меньше, чем может поместиться.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(input1, minmax(80px, 1fr));
  gap: 10px;
  background-color: #fff0f5;
  padding: 10px;
  border: 1px solid #ffb6c1;
  min-height: 100px;
}

.grid-item {
  background-color: #FF69B4;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #DB7093;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(input1, minmax(80px, 1fr));
  gap: 10px;
  background-color: #fff0f5;
  padding: 10px;
  border: 1px solid #ffb6c1;
  min-height: 100px;
}

.grid-item {
  background-color: #FF69B4;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #DB7093;
}

HTML

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
</div>

Ключевое слово `auto-fit` работает похоже на `auto-fill`, но если после размещения элементов остаются пустые треки, `auto-fit` схлопывает их, позволяя существующим элементам растянуться и занять доступное место. Используйте `minmax(80px, 1fr)` как размер трека.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинация repeat() и фиксированных треков

Создайте макет, где первая колонка имеет фиксированную ширину 100px, а оставшееся пространство занимают две колонки равной ширины. Используйте `repeat()` для определения повторяющейся части.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 100px input1(2, 1fr);
  gap: 10px;
  background-color: #f5f5f5;
  padding: 10px;
  border: 1px solid #dcdcdc;
  min-height: 100px;
}

.grid-item {
  background-color: #778899;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #708090;
}
.grid-item:first-child {
  background-color: #6A5ACD; /* Выделим первую колонку */
  border-color: #483D8B;
}

                     .grid-container {
  display: grid;
  grid-template-columns: 100px input1(2, 1fr);
  gap: 10px;
  background-color: #f5f5f5;
  padding: 10px;
  border: 1px solid #dcdcdc;
  min-height: 100px;
}

.grid-item {
  background-color: #778899;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #708090;
}
.grid-item:first-child {
  background-color: #6A5ACD; /* Выделим первую колонку */
  border-color: #483D8B;
}

HTML

<div class="grid-container">
  <div class="grid-item">Сайдбар</div>
  <div class="grid-item">Контент 1</div>
  <div class="grid-item">Контент 2</div>
  <div class="grid-item">Футер 1</div>
  <div class="grid-item">Футер 2</div>
  <div class="grid-item">Футер 3</div>
</div>

Вы можете комбинировать явное указание размеров треков с функцией `repeat()` в одном свойстве (`grid-template-columns` или `grid-template-rows`). Укажите сначала фиксированный трек, а затем используйте `repeat()` для остальных.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Repeat() с несколькими размерами треков

Используйте `repeat()` для создания повторяющегося шаблона из двух колонок: одна шириной 1fr, другая - 80px. Повторите этот шаблон дважды, чтобы получить всего четыре колонки.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, input1);
  gap: 5px;
  background-color: #e0ffff;
  padding: 10px;
  border: 1px solid #afeeee;
  min-height: 100px;
}

.grid-item {
  background-color: #40E0D0;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #008B8B;
}
/* Чередование фона для наглядности */
.grid-item:nth-child(odd) {
  background-color: #48D1CC;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, input1);
  gap: 5px;
  background-color: #e0ffff;
  padding: 10px;
  border: 1px solid #afeeee;
  min-height: 100px;
}

.grid-item {
  background-color: #40E0D0;
  color: white;
  padding: 15px;
  text-align: center;
  border: 1px solid #008B8B;
}
/* Чередование фона для наглядности */
.grid-item:nth-child(odd) {
  background-color: #48D1CC;
}

HTML

<div class="grid-container">
  <div class="grid-item">1fr</div>
  <div class="grid-item">80px</div>
  <div class="grid-item">1fr</div>
  <div class="grid-item">80px</div>
  <div class="grid-item">1fr</div>
  <div class="grid-item">80px</div>
  <div class="grid-item">1fr</div>
  <div class="grid-item">80px</div>
</div>

Второй аргумент функции `repeat()` может содержать не один размер трека, а список размеров. В данном случае шаблон состоит из `1fr 80px`. Этот шаблон нужно повторить 2 раза.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку