Включение Grid Layout (display: grid): Тренажер CSS

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

В этой серии заданий вы попрактикуетесь в активации CSS Grid Layout для контейнеров. Вам нужно будет использовать свойство `display` со значениями `grid` или `inline-grid`, чтобы превратить обычные HTML-элементы в грид-контейнеры. Задания начинаются с самых основ и постепенно усложняются, затрагивая различные способы применения `display: grid` к элементам с разными селекторами. Цель — закрепить навык включения грид-раскладки, что является первым шагом к работе с CSS Grid.

Список тем

Превращение div в Grid контейнер

Сделайте так, чтобы элемент с классом `container` стал грид-контейнером. Это позволит в дальнейшем располагать его дочерние элементы с использованием грид-свойств. Визуально элементы внутри контейнера могут немного изменить свое положение.

CSS

.container {
  input1: input2;
  /* Стили для наглядности */
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f9f9f9;
}

.item {
  border: 1px dashed #999;
  padding: 15px;
  background-color: #e9e9e9;
  text-align: center;
}

                     .container {
  input1: input2;
  /* Стили для наглядности */
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f9f9f9;
}

.item {
  border: 1px dashed #999;
  padding: 15px;
  background-color: #e9e9e9;
  text-align: center;
}

HTML

<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

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

Элемент `span` с id `inline-box` должен стать строчным (inline) грид-контейнером. Это означает, что сам контейнер будет вести себя как строчный элемент (обтекаться текстом), но его содержимое можно будет раскладывать по грид-сетке.

CSS

#inline-box {
  input1: input2;
  /* Стили для наглядности */
  border: 1px solid #f00;
  padding: 5px;
  margin: 0 5px;
}

.inline-item {
  border: 1px dashed #900;
  padding: 5px;
  background-color: #fee;
}

                     #inline-box {
  input1: input2;
  /* Стили для наглядности */
  border: 1px solid #f00;
  padding: 5px;
  margin: 0 5px;
}

.inline-item {
  border: 1px dashed #900;
  padding: 5px;
  background-color: #fee;
}

HTML

<p>
  Какой-то текст до контейнера 
  <span id="inline-box">
    <span class="inline-item">A</span>
    <span class="inline-item">B</span>
  </span>
  и какой-то текст после.
</p>

Используйте свойство `display` со значением `inline-grid` для селектора `#inline-box`. Это сделает элемент строчным грид-контейнером.

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

Результат

Сообщения

Выполнить

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

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

Применение Grid к элементу section

Необходимо задать элементу `section` возможность использовать грид-раскладку для его дочерних элементов `article`. Превратите `section` в грид-контейнер.

CSS

section {
  input1: input2;
  /* Стили для наглядности */
  border: 2px solid #4CAF50;
  padding: 10px;
  background-color: #e8f5e9;
}

article {
  border: 1px solid #81c784;
  padding: 10px;
  background-color: #c8e6c9;
  margin-bottom: 5px; /* Добавлено для лучшей визуализации до применения grid */
}

                     section {
  input1: input2;
  /* Стили для наглядности */
  border: 2px solid #4CAF50;
  padding: 10px;
  background-color: #e8f5e9;
}

article {
  border: 1px solid #81c784;
  padding: 10px;
  background-color: #c8e6c9;
  margin-bottom: 5px; /* Добавлено для лучшей визуализации до применения grid */
}

HTML

<section>
  <article>Статья 1</article>
  <article>Статья 2</article>
</section>

Найдите селектор для элемента `section` и примените к нему свойство `display` со значением `grid`.

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

Результат

Сообщения

Выполнить

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

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

Grid для контейнера с ID

Элемент `div` с идентификатором `main-content` должен стать грид-контейнером. Используйте селектор по ID, чтобы применить нужное свойство.

CSS

#main-content {
  input1: input2;
  /* Стили для наглядности */
  border: 1px solid blue;
  padding: 10px;
}

.widget {
  border: 1px dashed navy;
  padding: 8px;
  background-color: #e0e0ff;
}

                     #main-content {
  input1: input2;
  /* Стили для наглядности */
  border: 1px solid blue;
  padding: 10px;
}

.widget {
  border: 1px dashed navy;
  padding: 8px;
  background-color: #e0e0ff;
}

HTML

<div id="main-content">
  <div class="widget">Виджет 1</div>
  <div class="widget">Виджет 2</div>
  <div class="widget">Виджет 3</div>
  <div class="widget">Виджет 4</div>
</div>

Чтобы выбрать элемент по ID, используйте символ `#` перед именем идентификатора (`#main-content`). Затем примените свойство `display` со значением `grid`.

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

Результат

Сообщения

Выполнить

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

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

Включение Grid и установка отступов

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

CSS

.card-deck {
  input1: input2;
  input3: 10px; /* Отступы между карточками */
  /* Стили для наглядности */
  border: 1px solid #ff9800;
  padding: 10px;
  background: #fff3e0;
}

.card {
  border: 1px solid #ffcc80;
  padding: 15px;
  background-color: #ffe0b2;
}

                     .card-deck {
  input1: input2;
  input3: 10px; /* Отступы между карточками */
  /* Стили для наглядности */
  border: 1px solid #ff9800;
  padding: 10px;
  background: #fff3e0;
}

.card {
  border: 1px solid #ffcc80;
  padding: 15px;
  background-color: #ffe0b2;
}

HTML

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

Используйте `display: grid;` для `.card-deck`, чтобы сделать его грид-контейнером. Затем добавьте свойство `gap` (или `grid-gap`) со значением `10px` для создания отступов между грид-элементами.

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

Результат

Сообщения

Выполнить

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

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

Grid для галереи изображений

Превратите контейнер `div` с классом `image-gallery` в грид-контейнер, чтобы подготовить его для размещения изображений в виде сетки.

CSS

.image-gallery {
  input1: input2;
  gap: 5px; /* Небольшой отступ между картинками */
  padding: 5px;
  border: 1px solid #ccc;
  background: #eee;
}

.image-gallery img {
  max-width: 100%;
  display: block; /* Убирает лишние отступы под картинками */
  border: 1px solid #aaa;
}

                     .image-gallery {
  input1: input2;
  gap: 5px; /* Небольшой отступ между картинками */
  padding: 5px;
  border: 1px solid #ccc;
  background: #eee;
}

.image-gallery img {
  max-width: 100%;
  display: block; /* Убирает лишние отступы под картинками */
  border: 1px solid #aaa;
}

HTML

<div class="image-gallery">
  <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 4">
  <img src="https://naytikurs.ru/img/5.png" alt="Image 5">
</div>

Для селектора `.image-gallery` используйте свойство `display` со значением `grid`.

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

Результат

Сообщения

Выполнить

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

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

Вложенный Grid: активация на родителе и потомке

Сделайте и внешний контейнер (`#outer-box`), и один из его внутренних элементов (`.inner-box`) грид-контейнерами. Это демонстрирует возможность создания вложенных грид-сеток.

CSS

#outer-box {
  input1: input2;
  gap: 10px;
  padding: 10px;
  border: 2px solid green;
  background: lightgreen;
}

.item {
  padding: 10px;
  border: 1px dashed darkgreen;
  background: #f0fff0;
}

.inner-box {
  /* Этот блок тоже должен стать грид-контейнером */
  input3: input4;
  gap: 5px;
  padding: 5px;
  border: 1px solid blue;
  background: lightblue;
}

.inner-item {
  padding: 5px;
  border: 1px dashed darkblue;
  background: #f0f8ff;
}

                     #outer-box {
  input1: input2;
  gap: 10px;
  padding: 10px;
  border: 2px solid green;
  background: lightgreen;
}

.item {
  padding: 10px;
  border: 1px dashed darkgreen;
  background: #f0fff0;
}

.inner-box {
  /* Этот блок тоже должен стать грид-контейнером */
  input3: input4;
  gap: 5px;
  padding: 5px;
  border: 1px solid blue;
  background: lightblue;
}

.inner-item {
  padding: 5px;
  border: 1px dashed darkblue;
  background: #f0f8ff;
}

HTML

<div id="outer-box">
  <div class="item">Элемент 1</div>
  <div class="item inner-box">
    <div class="inner-item">A</div>
    <div class="inner-item">B</div>
  </div>
  <div class="item">Элемент 3</div>
</div>

Примените `display: grid;` к селектору `#outer-box`. Затем примените `display: grid;` также к селектору `.inner-box`.

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

Результат

Сообщения

Выполнить

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

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