Управление потоком элементов (grid-auto-flow): Тренажер CSS

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

В этой серии заданий вы попрактикуетесь в использовании свойства `grid-auto-flow`. Это свойство контролирует, как работает алгоритм автоматического размещения элементов в грид-контейнере, когда элементы размещаются неявно (то есть для них не заданы конкретные `grid-row` или `grid-column`). Вы научитесь изменять направление потока (по строкам или по столбцам) и использовать 'плотный' режим (`dense`) для заполнения пустых ячеек в сетке. Задания построены от простого к сложному, помогая закрепить понимание того, как `grid-auto-flow` влияет на раскладку.

Список тем

Базовый поток по строкам

Имеется грид-контейнер с несколькими элементами. Ваша задача — настроить автоматическое размещение так, чтобы новые элементы добавлялись последовательно по строкам, заполняя их слева направо.

CSS

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

.grid-item {
  background-color: #87ceeb;
  border: 1px solid #4682b4;
  text-align: center;
  line-height: 50px;
}

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

.grid-item {
  background-color: #87ceeb;
  border: 1px solid #4682b4;
  text-align: center;
  line-height: 50px;
}

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>

Используйте свойство `grid-auto-flow`. Чтобы элементы располагались по строкам, установите для этого свойства значение `row`.

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

Результат

Сообщения

Выполнить

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

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

Базовый поток по столбцам

Теперь настройте тот же грид-контейнер так, чтобы автоматическое размещение элементов происходило по столбцам, заполняя их сверху вниз, а затем переходя к следующему столбцу.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 120px;
  grid-auto-flow: input1;
}

.grid-item {
  background-color: #90ee90;
  border: 1px solid #3cb371;
  text-align: center;
  line-height: 50px;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 120px;
  grid-auto-flow: input1;
}

.grid-item {
  background-color: #90ee90;
  border: 1px solid #3cb371;
  text-align: center;
  line-height: 50px;
}

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>

Используйте свойство `grid-auto-flow`. Чтобы элементы располагались по столбцам, установите для этого свойства значение `column`.

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

Результат

Сообщения

Выполнить

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

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

Плотное размещение по строкам ('dense')

В этом гриде есть элемент, который занимает две ячейки по ширине. Из-за этого образуется пустое пространство. Используйте 'плотный' режим размещения по строкам, чтобы следующий элемент попытался занять это пустое место.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 120px;
  input1: input2;
}

.grid-item {
  background-color: #ffb6c1;
  border: 1px solid #ff69b4;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  grid-column: span 2;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 120px;
  input1: input2;
}

.grid-item {
  background-color: #ffb6c1;
  border: 1px solid #ff69b4;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  grid-column: span 2;
}

HTML

<div class="grid-container">
  <div class="grid-item item-1">1 (span 2)</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Чтобы включить 'плотный' режим при размещении по строкам, используйте значение `row dense` для свойства `grid-auto-flow`.

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

Результат

Сообщения

Выполнить

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

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

Плотное размещение по столбцам ('dense')

Аналогично предыдущему заданию, но теперь поток идет по столбцам. Один из элементов занимает две ячейки по высоте. Примените 'плотный' режим размещения по столбцам, чтобы заполнить образовавшееся пустое пространство.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 50px);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 170px;
  grid-auto-flow: input1;
}

.grid-item {
  background-color: #add8e6;
  border: 1px solid #87cefa;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  grid-row: span 2;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 50px);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 170px;
  grid-auto-flow: input1;
}

.grid-item {
  background-color: #add8e6;
  border: 1px solid #87cefa;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  grid-row: span 2;
}

HTML

<div class="grid-container">
  <div class="grid-item item-1">1 (span 2)</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>

Чтобы включить 'плотный' режим при размещении по столбцам, используйте значение `column dense` для свойства `grid-auto-flow`.

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

Результат

Сообщения

Выполнить

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

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

Поток по строкам и автоматическая высота строк

Задайте поток элементов по строкам. При этом явно определены только столбцы. Необходимо также указать свойство, которое будет определять высоту автоматически создаваемых строк. Установите высоту авто-строк равной 60px.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 190px; /* 3 строки по 60px + 2 gap по 10px + 2 padding по 10px */
  input1: row;
  input2: 60px;
}

.grid-item {
  background-color: #f0e68c;
  border: 1px solid #bdb76b;
  text-align: center;
  padding: 10px 0; /* Добавим padding для наглядности высоты */
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 190px; /* 3 строки по 60px + 2 gap по 10px + 2 padding по 10px */
  input1: row;
  input2: 60px;
}

.grid-item {
  background-color: #f0e68c;
  border: 1px solid #bdb76b;
  text-align: center;
  padding: 10px 0; /* Добавим padding для наглядности высоты */
}

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>

Используйте `grid-auto-flow` со значением `row`. Затем добавьте свойство `grid-auto-rows` и установите для него значение `60px`, чтобы задать высоту для неявно созданных строк.

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

Результат

Сообщения

Выполнить

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

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

Поток по столбцам и автоматическая ширина столбцов

Настройте поток элементов по столбцам. Явно определены только строки. Добавьте свойство для установки ширины автоматически создаваемых столбцов, задав им ширину 80px.

CSS

.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  width: 280px; /* (80px * 3) + (10px * 2) + (10px * 2) */
  min-height: 120px;
  grid-auto-flow: input1;
  input2: 80px;
}

.grid-item {
  background-color: #e9967a;
  border: 1px solid #cd5c5c;
  text-align: center;
  line-height: 50px;
}

                     .grid-container {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  width: 280px; /* (80px * 3) + (10px * 2) + (10px * 2) */
  min-height: 120px;
  grid-auto-flow: input1;
  input2: 80px;
}

.grid-item {
  background-color: #e9967a;
  border: 1px solid #cd5c5c;
  text-align: center;
  line-height: 50px;
}

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>

Используйте `grid-auto-flow` со значением `column`. Затем добавьте свойство `grid-auto-columns` и установите для него значение `80px`, чтобы задать ширину для неявно созданных столбцов.

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

Результат

Сообщения

Выполнить

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

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

Плотный поток по умолчанию (строки)

Если указать только `dense` для `grid-auto-flow`, по умолчанию используется поток по строкам. Примените это значение, чтобы активировать плотное размещение по строкам.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 120px;
  grid-auto-flow: input1;
}

.grid-item {
  background-color: #b0c4de;
  border: 1px solid #778899;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  grid-column: span 2;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 120px;
  grid-auto-flow: input1;
}

.grid-item {
  background-color: #b0c4de;
  border: 1px solid #778899;
  text-align: center;
  line-height: 50px;
}

.item-1 {
  grid-column: span 2;
}

HTML

<div class="grid-container">
  <div class="grid-item item-1">1 (span 2)</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Установите для свойства `grid-auto-flow` значение `dense`. Это эквивалентно `row dense`.

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

Результат

Сообщения

Выполнить

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

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