Создание сетки: grid-template-rows [Модуль 7: CSS Grid Layout]: Тренажер CSS

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

Эта серия упражнений посвящена свойству `grid-template-rows` в CSS Grid Layout. Вы будете практиковаться в определении высоты строк грид-контейнера, используя различные единицы измерения и функции. Задания построены от простого к сложному: начиная с определения строк фиксированной высоты и заканчивая использованием функций `repeat()` и `minmax()`, а также ключевых слов. Вам нужно будет заполнить пропущенные части CSS-кода, чтобы достичь требуемого результата, который будет отображен визуально.

Список тем

Определение трех строк фиксированной высоты

id: 37273_grid-rows-task-1

Создайте грид-контейнер с тремя строками. Первая строка должна иметь высоту 50px, вторая - 100px, а третья - 50px. Используйте свойство для явного задания размеров строк.

CSS

.grid-container {
  display: grid;
  /* Задайте три строки высотой 50px, 100px, 50px */
  input1: 50px 100px 50px;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 220px; /* Общая высота для наглядности */
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  text-align: center;
}

                     .grid-container {
  display: grid;
  /* Задайте три строки высотой 50px, 100px, 50px */
  input1: 50px 100px 50px;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 220px; /* Общая высота для наглядности */
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  text-align: 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>

Чтобы определить размеры строк в грид-контейнере, используйте свойство `grid-template-rows`. Перечислите нужные высоты строк через пробел. В данном случае это будут `50px`, `100px` и `50px`.

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

Результат

Сообщения

Выполнить

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

Использование единиц fr для пропорциональных строк

id: 37273_grid-rows-task-2

Разделите доступное пространство грид-контейнера на три строки. Первая строка должна занимать одну часть доступного пространства (1fr), вторая - две части (2fr), а третья - снова одну часть (1fr).

CSS

.grid-container {
  display: grid;
  /* Задайте три строки в пропорции 1:2:1 */
  grid-template-rows: input1 2fr input2;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 250px; /* Высота контейнера для работы fr */
}

.grid-item {
  background-color: #2196F3;
  color: white;
  padding: 10px;
  text-align: center;
}

                     .grid-container {
  display: grid;
  /* Задайте три строки в пропорции 1:2:1 */
  grid-template-rows: input1 2fr input2;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 250px; /* Высота контейнера для работы fr */
}

.grid-item {
  background-color: #2196F3;
  color: white;
  padding: 10px;
  text-align: center;
}

HTML

<div class="grid-container">
  <div class="grid-item">Элемент 1 (1fr)</div>
  <div class="grid-item">Элемент 2 (2fr)</div>
  <div class="grid-item">Элемент 3 (1fr)</div>
</div>

Используйте свойство `grid-template-rows`. Для создания пропорциональных строк применяйте единицы `fr`. Значения `1fr`, `2fr`, `1fr` разделят доступную высоту в соотношении 1:2:1.

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

Результат

Сообщения

Выполнить

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

Комбинирование fr и auto

id: 37273_grid-rows-task-3

Создайте грид с тремя строками. Первая строка должна занимать все доступное пространство (используйте `fr`), вторая строка должна подстраиваться под высоту своего содержимого (используйте ключевое слово), а третья строка должна иметь фиксированную высоту 60px.

CSS

.grid-container {
  display: grid;
  /* Задайте строки: 1fr, auto, 60px */
  grid-template-rows: input1 input2 60px;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 280px;
}

.grid-item {
  background-color: #ff9800;
  color: white;
  padding: 10px;
  text-align: center;
}

.item2 {
  /* Добавим контент для auto */
  padding: 20px 10px;
}

                     .grid-container {
  display: grid;
  /* Задайте строки: 1fr, auto, 60px */
  grid-template-rows: input1 input2 60px;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 280px;
}

.grid-item {
  background-color: #ff9800;
  color: white;
  padding: 10px;
  text-align: center;
}

.item2 {
  /* Добавим контент для auto */
  padding: 20px 10px;
}

HTML

<div class="grid-container">
  <div class="grid-item item1">Элемент 1 (1fr)</div>
  <div class="grid-item item2">Элемент 2 (auto)<br>Высота этой строки зависит от контента.</div>
  <div class="grid-item item3">Элемент 3 (60px)</div>
</div>

В свойстве `grid-template-rows` можно комбинировать разные единицы и ключевые слова. Используйте `1fr` для первой строки, чтобы она заняла доступное пространство. Примените ключевое слово `auto` для второй строки, чтобы ее высота определилась содержимым. Задайте `60px` для третьей строки.

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

Результат

Сообщения

Выполнить

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

Использование функции repeat()

id: 37273_grid-rows-task-4

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

CSS

.grid-container {
  display: grid;
  /* Создайте 4 строки по 50px с помощью repeat() */
  grid-template-rows: input1(input2, 50px);
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 230px; /* (50px * 4) + (5px * 3) + (5px * 2) */
}

.grid-item {
  background-color: #e91e63;
  color: white;
  padding: 10px;
  text-align: center;
}

                     .grid-container {
  display: grid;
  /* Создайте 4 строки по 50px с помощью repeat() */
  grid-template-rows: input1(input2, 50px);
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 230px; /* (50px * 4) + (5px * 3) + (5px * 2) */
}

.grid-item {
  background-color: #e91e63;
  color: white;
  padding: 10px;
  text-align: 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>

Функция `repeat()` позволяет компактно определять повторяющиеся треки (строки или колонки). Первый аргумент - количество повторений, второй - размер трека. Чтобы создать 4 строки по 50px, используйте `repeat(4, 50px)` в свойстве `grid-template-rows`.

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

Результат

Сообщения

Выполнить

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

Использование функции minmax()

id: 37273_grid-rows-task-5

Определите две строки. Первая строка должна иметь минимальную высоту 40px, но может растягиваться до высоты содержимого (используйте `minmax()` и `auto`). Вторая строка должна занимать оставшееся доступное пространство (1fr).

CSS

.grid-container {
  display: grid;
  /* 1-я строка: min 40px, max auto; 2-я строка: 1fr */
  grid-template-rows: input1(40px, input2) 1fr;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 250px;
}

.grid-item {
  background-color: #009688;
  color: white;
  padding: 10px;
  text-align: center;
}
.item1 {
  /* Немного контента для проверки auto */
  padding-bottom: 30px;
}

                     .grid-container {
  display: grid;
  /* 1-я строка: min 40px, max auto; 2-я строка: 1fr */
  grid-template-rows: input1(40px, input2) 1fr;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 250px;
}

.grid-item {
  background-color: #009688;
  color: white;
  padding: 10px;
  text-align: center;
}
.item1 {
  /* Немного контента для проверки auto */
  padding-bottom: 30px;
}

HTML

<div class="grid-container">
  <div class="grid-item item1">Строка 1 (minmax(40px, auto))<br>Может расти.</div>
  <div class="grid-item item2">Строка 2 (1fr)</div>
</div>

Функция `minmax(min, max)` задает диапазон размеров для трека. Используйте `minmax(40px, auto)` для первой строки: минимальная высота 40px, максимальная - по содержимому. Для второй строки используйте `1fr`.

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

Результат

Сообщения

Выполнить

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

Комбинация repeat() и других значений

id: 37273_grid-rows-task-6

Создайте сложную структуру строк: первая строка - 50px, затем две строки по 1fr каждая (используйте `repeat()`), и последняя строка - `auto`.

CSS

.grid-container {
  display: grid;
  /* Строки: 50px, repeat(2, 1fr), auto */
  grid-template-rows: 50px input1(2, input2) input3;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 300px;
}

.grid-item {
  background-color: #607d8b;
  color: white;
  padding: 10px;
  text-align: center;
}
.item4 {
  /* Контент для auto */
  padding: 15px 10px;
}

                     .grid-container {
  display: grid;
  /* Строки: 50px, repeat(2, 1fr), auto */
  grid-template-rows: 50px input1(2, input2) input3;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 300px;
}

.grid-item {
  background-color: #607d8b;
  color: white;
  padding: 10px;
  text-align: center;
}
.item4 {
  /* Контент для auto */
  padding: 15px 10px;
}

HTML

<div class="grid-container">
  <div class="grid-item item1">Строка 1 (50px)</div>
  <div class="grid-item item2">Строка 2 (1fr)</div>
  <div class="grid-item item3">Строка 3 (1fr)</div>
  <div class="grid-item item4">Строка 4 (auto)<br>Контент...</div>
</div>

В `grid-template-rows` можно комбинировать явные размеры, `fr`, `auto` и функцию `repeat()`. Запишите значения через пробел: `50px`, затем `repeat(2, 1fr)` для двух одинаковых гибких строк, и `auto` для последней строки.

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

Результат

Сообщения

Выполнить

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

Именованные линии строк

id: 37273_grid-rows-task-7

Создайте три строки (50px, 1fr, auto) и задайте имена для линий сетки. Перед первой строкой линия должна называться `header-start`, между первой и второй - `header-end` и `main-start`, между второй и третьей - `main-end` и `footer-start`, а после третьей - `footer-end`.

CSS

.grid-container {
  display: grid;
  /* Строки: 50px, 1fr, auto с именами линий */
  grid-template-rows: input1 header-start input2 50px input1 header-end main-start input2 1fr input1 main-end footer-start input2 auto input1 footer-end input2;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 250px;
}

.grid-item {
  background-color: #795548;
  color: white;
  padding: 10px;
  text-align: center;
}

                     .grid-container {
  display: grid;
  /* Строки: 50px, 1fr, auto с именами линий */
  grid-template-rows: input1 header-start input2 50px input1 header-end main-start input2 1fr input1 main-end footer-start input2 auto input1 footer-end input2;
  gap: 5px;
  background-color: #eee;
  padding: 5px;
  height: 250px;
}

.grid-item {
  background-color: #795548;
  color: white;
  padding: 10px;
  text-align: center;
}

HTML

<div class="grid-container">
  <div class="grid-item" style="grid-row: header-start / header-end;">Header</div>
  <div class="grid-item" style="grid-row: main-start / main-end;">Main</div>
  <div class="grid-item" style="grid-row: footer-start / footer-end;">Footer</div>
</div>

Имена линий задаются в квадратных скобках `[]` перед или после определения размера строки в `grid-template-rows`. Несколько имен для одной линии перечисляются через пробел внутри скобок. Пример: `[line-name-1 line-name-2] 100px [line-name-3]`.

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

Результат

Сообщения

Выполнить

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