Автоматические треки (grid-auto-rows, grid-auto-columns)

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

Опубликовано 17.03.2025
Просмотры 9
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер CSS

В этой серии заданий вы попрактикуетесь в использовании свойств `grid-auto-rows` и `grid-auto-columns`. Эти свойства позволяют контролировать размер треков (строк и колонок), которые создаются автоматически, когда количество элементов в грид-контейнере превышает количество явно заданных треков с помощью `grid-template-rows` или `grid-template-columns`. Вы научитесь задавать фиксированные или гибкие размеры для этих неявно созданных треков, что очень полезно для создания адаптивных и предсказуемых сеток.

Список тем

Базовая высота автоматических строк

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

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 100px; /* Явно задана только одна строка */
  input1: 50px; /* Задайте высоту для автоматических строк */
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  max-width: 350px;
}

.grid-item {
  background-color: #87CEEB;
  border: 1px solid #4682B4;
  padding: 15px;
  text-align: center;
  color: white;
}
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>
Используйте свойство `grid-auto-rows`, чтобы установить высоту для неявно созданных строк. Укажите значение высоты, например, `50px`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Базовая ширина автоматических колонок

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

CSS
.grid-container {
  display: grid;
  grid-auto-flow: column; /* Располагаем элементы по колонкам */
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: 100px; /* Явно задана только одна колонка */
  input1: 80px; /* Задайте ширину для автоматических колонок */
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  width: max-content; /* Чтобы контейнер расширялся под колонки */
  max-width: 350px;
  overflow-x: auto; /* Добавляем скролл, если колонок много */
}

.grid-item {
  background-color: #90EE90;
  border: 1px solid #3CB371;
  padding: 10px;
  text-align: center;
  color: #333;
}
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 class="grid-item">E</div>
  <div class="grid-item">F</div>
</div>
Примените свойство `grid-auto-columns`, чтобы задать ширину для неявно созданных колонок. Укажите значение ширины, например, `80px`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Гибкая высота автоматических строк с minmax()

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

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px; /* Первая строка */
  grid-auto-rows: input1(40px, 60px)input2; /* Задайте диапазон высоты */
  gap: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  max-width: 350px;
}

.grid-item {
  background-color: #FFB6C1;
  border: 1px solid #FF69B4;
  padding: 5px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  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 class="grid-item">7</div>
</div>
В свойстве `grid-auto-rows` используйте функцию `minmax()`. Первым аргументом укажите минимальную высоту (`40px`), вторым - максимальную (`60px`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Гибкая ширина автоматических колонок с minmax()

Задайте гибкую ширину для автоматически создаваемых колонок. Используйте `minmax()`, чтобы ширина была не менее 60px, но не более 1fr (одна фракция доступного пространства).

CSS
.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 60px;
  grid-template-columns: 100px; /* Первая колонка */
  input1: input2(60px, 1fr)input3
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  max-width: 350px;
  overflow-x: auto;
}

.grid-item {
  background-color: #ADD8E6;
  border: 1px solid #87CEFA;
  padding: 10px;
  text-align: center;
  color: #333;
}
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-columns` со значением `minmax(60px, 1fr)`. Это позволит колонкам сжиматься до 60px и растягиваться, занимая равную долю оставшегося пространства.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Чередующиеся размеры автоматических строк

Создайте сетку, где автоматически созданные строки имеют чередующиеся высоты: первая автоматическая строка 40px, вторая 60px, третья снова 40px, четвертая 60px и так далее.

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 70px; /* Явная строка */
  input1: 40px 60px; /* Задайте чередующиеся высоты */
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  max-width: 350px;
}

.grid-item {
  background-color: #D8BFD8;
  border: 1px solid #BA55D3;
  padding: 10px;
  text-align: center;
  color: white;
}
HTML
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3 (auto 40px)</div>
  <div class="grid-item">4 (auto 40px)</div>
  <div class="grid-item">5 (auto 60px)</div>
  <div class="grid-item">6 (auto 60px)</div>
  <div class="grid-item">7 (auto 40px)</div>
  <div class="grid-item">8 (auto 40px)</div>
</div>
В свойстве `grid-auto-rows` можно указать несколько значений через пробел. Они будут применяться поочередно к создаваемым строкам. Используйте `40px 60px`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Автоматические колонки с картинками

Создайте горизонтальную ленту изображений. Явно задана только первая колонка. Все остальные автоматически созданные колонки должны иметь одинаковую ширину, достаточную для отображения картинки (например, 100px).

CSS
.grid-container {
  display: grid;
  input1: column;
  grid-template-rows: 100px; /* Высота строки для картинок */
  grid-template-columns: 120px; /* Ширина первой колонки */
  input2: 100px;
  gap: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  width: max-content;
  max-width: 350px;
  overflow-x: auto;
}

.grid-item {
  background-color: #fff;
  border: 1px solid #ddd;
  overflow: hidden; /* Обрезать картинку, если она больше */
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item img {
  display: block;
  max-width: 100%;
  height: auto;
}
HTML
<div class="grid-container">
  <div class="grid-item"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
  <div class="grid-item"><img src="https://naytikurs.ru/img/2.png" alt="Image 2"></div>
  <div class="grid-item"><img src="https://naytikurs.ru/img/4.png" alt="Image 4"></div>
  <div class="grid-item"><img src="https://naytikurs.ru/img/5.png" alt="Image 5"></div>
  <div class="grid-item"><img src="https://naytikurs.ru/img/6.png" alt="Image 6"></div>
</div>
Используйте `display: grid` и `grid-auto-flow: column`. Затем примените свойство `grid-auto-columns`, чтобы установить ширину для неявно созданных колонок, например, `100px`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Комбинация auto-rows и auto-columns

Создайте сетку, где явно задана только одна ячейка (1 строка, 1 колонка). Используйте `grid-auto-rows` и `grid-auto-columns`, чтобы все автоматически созданные строки имели высоту 50px, а все автоматически созданные колонки — ширину 70px.

CSS
.grid-container {
  display: grid;
  grid-template-columns: 100px; /* Явная колонка */
  grid-template-rows: 80px;    /* Явная строка */
  input1: 50px;
  input2: 70px;
  gap: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  max-width: 350px;
  /* grid-auto-flow по умолчанию row, элементы заполняют строки */
}

.grid-item {
  background-color: #FFA07A;
  border: 1px solid #FA8072;
  padding: 10px;
  text-align: center;
  color: white;
  font-size: 12px;
}
HTML
<div class="grid-container">
  <div class="grid-item">1 (явный)</div>
  <div class="grid-item">2 (auto col)</div>
  <div class="grid-item">3 (auto col)</div>
  <div class="grid-item">4 (auto row)</div>
  <div class="grid-item">5 (auto row/col)</div>
  <div class="grid-item">6 (auto row/col)</div>
  <div class="grid-item">7 (auto row)</div>
  <div class="grid-item">8 (auto row/col)</div>
  <div class="grid-item">9 (auto row/col)</div>
</div>
Вам нужно использовать два свойства: `grid-auto-rows` со значением `50px` и `grid-auto-columns` со значением `70px`. Не забудьте про `display: grid`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру