Управление потоком элементов (grid-auto-flow) [Модуль 7: CSS Grid Layout]: Тренажер CSS

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

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

Список тем

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

id: 37284_grid-auto-flow-1

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

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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37284_grid-auto-flow-2

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

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')

id: 37284_grid-auto-flow-3

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

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')

id: 37284_grid-auto-flow-4

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

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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37284_grid-auto-flow-5

Задайте поток элементов по строкам. При этом явно определены только столбцы. Необходимо также указать свойство, которое будет определять высоту автоматически создаваемых строк. Установите высоту авто-строк равной 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`, чтобы задать высоту для неявно созданных строк.

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

Результат

Сообщения

Выполнить

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

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

id: 37284_grid-auto-flow-6

Настройте поток элементов по столбцам. Явно определены только строки. Добавьте свойство для установки ширины автоматически создаваемых столбцов, задав им ширину 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`, чтобы задать ширину для неявно созданных столбцов.

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

Результат

Сообщения

Выполнить

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

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

id: 37284_grid-auto-flow-7

Если указать только `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`.

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

Результат

Сообщения

Выполнить

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