Промежутки с gap, row-gap, column-gap: Тренажер CSS

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

Эта серия упражнений посвящена свойствам CSS для управления промежутками между элементами в контейнерах Flexbox и Grid: `gap`, `row-gap` и `column-gap`. Вы попрактикуетесь в установке одинаковых и разных промежутков между строками и столбцами, используя как сокращенное свойство `gap`, так и его составляющие. Задания построены от простого к сложному: начиная с применения базового `gap` и заканчивая использованием раздельных свойств `row-gap` и `column-gap` в различных контекстах макета. Вам будет предоставлен готовый HTML и частично заполненный CSS. Ваша задача — вписать недостающие фрагменты кода в отмеченные поля (`input1`, `input2` и т.д.), чтобы достичь нужного визуального результата, который будет отображаться в окне предпросмотра.

Список тем

Базовый промежуток с gap

Создайте одинаковый промежуток размером 15px между всеми элементами внутри контейнера `.container`. Элементы уже расположены с использованием Flexbox.

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 300px; /* Для наглядности в iframe */
  /* Добавьте свойство для промежутка */
  input1: 15px;
}

.item {
  background-color: #87ceeb;
  color: white;
  padding: 20px;
  text-align: center;
  min-width: 80px; /* Для наглядности */
  flex-grow: 1;
}

                     .container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 300px; /* Для наглядности в iframe */
  /* Добавьте свойство для промежутка */
  input1: 15px;
}

.item {
  background-color: #87ceeb;
  color: white;
  padding: 20px;
  text-align: center;
  min-width: 80px; /* Для наглядности */
  flex-grow: 1;
}

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>

Чтобы установить одинаковый промежуток между строками и столбцами в flex-контейнере, используйте свойство `gap`. Оно принимает одно значение, которое будет применено и к `row-gap`, и к `column-gap`.

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

Результат

Сообщения

Выполнить

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

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

Промежуток между строками с row-gap

Установите промежуток только между строками элементов внутри контейнера `.container`. Размер промежутка должен быть 20px. Промежутка между столбцами быть не должно.

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 250px; /* Для переноса строк */
  /* Добавьте свойство для промежутка между строками */
  input1: 20px;
}

.item {
  background-color: #90ee90;
  color: black;
  padding: 15px;
  text-align: center;
  width: 80px; /* Фиксированная ширина для переноса */
}

                     .container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 250px; /* Для переноса строк */
  /* Добавьте свойство для промежутка между строками */
  input1: 20px;
}

.item {
  background-color: #90ee90;
  color: black;
  padding: 15px;
  text-align: center;
  width: 80px; /* Фиксированная ширина для переноса */
}

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>

Используйте свойство `row-gap`, чтобы задать промежуток исключительно между строками flex-элементов (или grid-элементов).

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

Результат

Сообщения

Выполнить

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

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

Промежуток между столбцами с column-gap

Задайте промежуток только между столбцами элементов внутри контейнера `.card-container`. Размер промежутка должен быть 10px. Промежутка между строками быть не должно.

CSS

.card-container {
  display: flex;
  flex-wrap: wrap; /* Позволяет переноситься */
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 350px;
  /* Добавьте свойство для промежутка между столбцами */
  input1: 10px;
}

.card {
  background-color: #f08080;
  color: white;
  padding: 20px;
  text-align: center;
  flex-basis: 100px; /* Базовая ширина для создания столбцов */
  flex-grow: 1;
}

                     .card-container {
  display: flex;
  flex-wrap: wrap; /* Позволяет переноситься */
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 350px;
  /* Добавьте свойство для промежутка между столбцами */
  input1: 10px;
}

.card {
  background-color: #f08080;
  color: white;
  padding: 20px;
  text-align: center;
  flex-basis: 100px; /* Базовая ширина для создания столбцов */
  flex-grow: 1;
}

HTML

<div class="card-container">
  <div class="card">Карточка 1</div>
  <div class="card">Карточка 2</div>
  <div class="card">Карточка 3</div>
  <div class="card">Карточка 4</div>
</div>

Для установки промежутка только между столбцами используйте свойство `column-gap`.

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

Результат

Сообщения

Выполнить

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

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

Разные промежутки через gap

Используя сокращенное свойство `gap`, установите промежуток между строками в 25px, а между столбцами — 10px для элементов в контейнере `.grid-container`, который использует Grid Layout.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 5px;
  border: 1px solid #ccc;
  max-width: 300px;
  /* Используйте сокращенное свойство gap */
  input1: 25px input2;
}

.grid-item {
  background-color: #ffdab9;
  color: #333;
  padding: 25px;
  text-align: center;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 5px;
  border: 1px solid #ccc;
  max-width: 300px;
  /* Используйте сокращенное свойство gap */
  input1: 25px input2;
}

.grid-item {
  background-color: #ffdab9;
  color: #333;
  padding: 25px;
  text-align: center;
}

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>

Сокращенное свойство `gap` может принимать два значения: первое для `row-gap`, второе для `column-gap`. Например, `gap: 20px 10px;` установит 20px между строками и 10px между столбцами.

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

Результат

Сообщения

Выполнить

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

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

Применение gap в Grid Layout

Сделайте так, чтобы контейнер `.image-grid` использовал Grid Layout с тремя равными колонками. Затем установите одинаковый промежуток в 8px между всеми ячейками сетки, используя одно свойство.

CSS

.image-grid {
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 360px;
  /* Задайте тип отображения и колонки */
  display: input1;
  grid-template-columns: input2(3, 1fr);
  /* Установите промежуток */
  input3: 8px;
}

.image-grid img {
  width: 100%;
  height: auto;
  display: block; /* Убирает лишние отступы под картинкой */
}

                     .image-grid {
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 360px;
  /* Задайте тип отображения и колонки */
  display: input1;
  grid-template-columns: input2(3, 1fr);
  /* Установите промежуток */
  input3: 8px;
}

.image-grid img {
  width: 100%;
  height: auto;
  display: block; /* Убирает лишние отступы под картинкой */
}

HTML

<div class="image-grid">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <img src="https://naytikurs.ru/img/4.png" alt="Image 3">
  <img src="https://naytikurs.ru/img/5.png" alt="Image 4">
  <img src="https://naytikurs.ru/img/6.png" alt="Image 5">
  <img src="https://naytikurs.ru/img/7.png" alt="Image 6">
</div>

Сначала установите `display: grid;` и `grid-template-columns: repeat(3, 1fr);` для контейнера. Затем используйте свойство `gap` с одним значением, чтобы задать одинаковые промежутки между строками и столбцами сетки.

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

Результат

Сообщения

Выполнить

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

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

Раздельные row-gap и column-gap

Для контейнера `.product-list`, который использует Flexbox и перенос элементов, установите промежуток между строками (вертикальный) в 18px и промежуток между столбцами (горизонтальный) в 12px, используя два отдельных свойства.

CSS

.product-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 340px;
  /* Установите промежуток между строками */
  input1: 18px;
  /* Установите промежуток между столбцами */
  input2: 12px;
}

.product {
  background-color: #b0e0e6;
  color: #333;
  padding: 15px;
  text-align: center;
  flex-basis: 120px;
  flex-grow: 1;
}

                     .product-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 340px;
  /* Установите промежуток между строками */
  input1: 18px;
  /* Установите промежуток между столбцами */
  input2: 12px;
}

.product {
  background-color: #b0e0e6;
  color: #333;
  padding: 15px;
  text-align: center;
  flex-basis: 120px;
  flex-grow: 1;
}

HTML

<div class="product-list">
  <div class="product">Товар 1</div>
  <div class="product">Товар 2</div>
  <div class="product">Товар 3</div>
  <div class="product">Товар 4</div>
  <div class="product">Товар 5</div>
</div>

Используйте свойство `row-gap` для установки вертикального промежутка между строками и свойство `column-gap` для установки горизонтального промежутка между столбцами.

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

Результат

Сообщения

Выполнить

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

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