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

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

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

Эта серия упражнений посвящена автоматическому размещению элементов с использованием CSS Grid Layout и Flexible Box Layout (Flexbox). Вы попрактикуетесь в управлении потоком элементов, их выравнивании и распределении пространства без необходимости задавать точные координаты для каждого. Задания охватывают как базовые принципы создания сеток и гибких контейнеров, так и более продвинутые техники автоматического заполнения и адаптации макета. Вам предстоит заполнить пропущенные части CSS-кода, чтобы добиться нужного визуального результата, который будет отображаться в окне предпросмотра.

Список тем

Превращение в строку Flexbox

Используйте CSS Flexbox, чтобы расположить элементы списка (.item) горизонтально в одну строку внутри контейнера (.container). Элементы должны следовать друг за другом слева направо.

CSS
.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  input1: input2;
}

.item {
  background-color: #87ceeb;
  padding: 15px;
  margin: 5px;
  text-align: center;
  border-radius: 4px;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
Чтобы элементы внутри контейнера выстроились в строку, необходимо применить к контейнеру свойство `display` со значением `flex`. По умолчанию `flex-direction` имеет значение `row`, что как раз и располагает элементы горизонтально.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Выравнивание по центру в строке Flexbox

Расположите элементы списка (.item) горизонтально в одну строку и выровняйте их по центру главной оси (горизонтально) внутри контейнера (.container).

CSS
.container {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  input1: input2;
}

.item {
  background-color: #90ee90;
  padding: 15px;
  /* margin убран для наглядности центрирования */
  text-align: center;
  border-radius: 4px;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
Сначала сделайте контейнер flex-контейнером с помощью `display: flex;`. Затем используйте свойство `justify-content` со значением `center` для выравнивания элементов по центру главной (горизонтальной) оси.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Перенос строк во Flexbox

Сделайте так, чтобы элементы (.item) внутри flex-контейнера (.container) переносились на следующую строку, если они не помещаются в одну. Ширина контейнера ограничена.

CSS
.container {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  max-width: 250px; /* Ограничиваем ширину для демонстрации переноса */
  input1: input2;
}

.item {
  background-color: #ffa07a;
  padding: 15px;
  margin: 5px;
  min-width: 80px; /* Задаем минимальную ширину элементам */
  text-align: center;
  border-radius: 4px;
}
HTML
<div class="container">
  <div class="item">Один</div>
  <div class="item">Два</div>
  <div class="item">Три</div>
  <div class="item">Четыре</div>
</div>
Используйте свойство `flex-wrap` со значением `wrap` для flex-контейнера. Это позволит элементам переходить на новую строку.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Создание простой сетки Grid

Превратите контейнер (.container) в Grid-контейнер и создайте сетку из двух равных по ширине колонок для размещения элементов (.item).

CSS
.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  input1: input2;
  input3: input4;
  gap: 10px; /* Добавим отступ между ячейками */
}

.item {
  background-color: #add8e6;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
Чтобы сделать элемент Grid-контейнером, используйте `display: grid;`. Для определения колонок используйте свойство `grid-template-columns`. Чтобы создать две равные колонки, можно использовать значение `1fr 1fr` или `repeat(2, 1fr)`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Автоматическое размещение Grid (по строкам)

Задайте для Grid-контейнера (.container) автоматическое размещение элементов по строкам. Элементы должны заполнять сетку горизонтально, переходя на новую строку при необходимости.

CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Определим 3 колонки */
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  input1: input2;
}

.item {
  background-color: #f0e68c;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
Используйте свойство `grid-auto-flow` со значением `row`. Это значение используется по умолчанию, но для явного указания и практики оно полезно. Убедитесь, что контейнер является Grid-контейнером (`display: grid;`) и определены колонки (`grid-template-columns`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Автоматическое размещение Grid (по колонкам)

Настройте Grid-контейнер (.container) так, чтобы элементы автоматически размещались по колонкам. Элементы должны заполнять первую колонку сверху вниз, затем вторую и так далее.

CSS
.container {
  display: grid;
  /* Определим 3 строки */
  grid-template-rows: repeat(3, auto);
  /* Колонки будут создаваться автоматически */
  grid-auto-columns: minmax(80px, 1fr); 
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  height: 250px; /* Зададим высоту для наглядности */
  input1: input2;
}

.item {
  background-color: #dda0dd;
  padding: 15px;
  text-align: center;
  border-radius: 4px;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
Используйте свойство `grid-auto-flow` со значением `column`. Также необходимо определить строки с помощью `grid-template-rows` или позволить им создаваться неявно, но задать высоту контейнера или количество строк через `grid-template-rows`, чтобы размещение по колонкам было наглядным.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Адаптивные колонки Grid с auto-fit

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

CSS
.container {
  display: grid;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  input1: input2(input3, minmax(100px, 1fr));
}

.item {
  background-color: #ffdead;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}

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

Плотное размещение Grid (Dense)

Используйте алгоритм плотного размещения (`dense`) в Grid-контейнере (.container), чтобы попытаться заполнить пробелы в сетке, которые могли остаться из-за элементов разного размера. Некоторые элементы занимают больше одной ячейки.

CSS
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  grid-auto-rows: 80px; /* Задаем высоту автоматических строк */
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  /* Добавьте сюда свойство для плотного размещения */
  input1: input2;
}

.item {
  background-color: #b0e0e6;
  padding: 10px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #888;
}

/* Некоторые элементы сделаем больше */
.item-wide {
  grid-column: span 2;
}

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

.item-large {
  grid-column: span 2;
  grid-row: span 2;
}
HTML
<div class="container">
  <div class="item item-wide">1 (Wide)</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item item-tall">4 (Tall)</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item item-large">8 (Large)</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>
Добавьте к свойству `grid-auto-flow` значение `dense`. Его можно комбинировать с `row` или `column`, например `row dense` (это значение по умолчанию для `dense`, если не указано направление) или `column dense`. Убедитесь, что у вас есть элементы разного размера (например, с использованием `grid-column: span 2;` или `grid-row: span 2;`) для наглядности эффекта.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру