Создание сетки: grid-template-rows: Тренажер CSS

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

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

Список тем

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

Создайте грид-контейнер с тремя строками. Первая строка должна иметь высоту 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 для пропорциональных строк

Разделите доступное пространство грид-контейнера на три строки. Первая строка должна занимать одну часть доступного пространства (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

Создайте грид с тремя строками. Первая строка должна занимать все доступное пространство (используйте `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()

Создайте грид-контейнер с четырьмя одинаковыми строками. Каждая строка должна иметь высоту 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()

Определите две строки. Первая строка должна иметь минимальную высоту 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() и других значений

Создайте сложную структуру строк: первая строка - 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` для последней строки.

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

Результат

Сообщения

Выполнить

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

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

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

Создайте три строки (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]`.

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

Результат

Сообщения

Выполнить

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

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