Подсеточные элементы (Subgrid)

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

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

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

Список тем

Выравнивание колонок с помощью Subgrid

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

CSS
.parent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  max-width: 350px;
}

.parent-grid > div {
  border: 1px dashed #999;
  padding: 10px;
  background-color: #e9e9e9;
  text-align: center;
}

.nested-grid-container {
  grid-column: 1 / 3; /* Занимает первые две колонки родителя */
  padding: 0;
  border: 1px solid blue;
}

.nested-grid {
  display: grid;
  /* Укажите, что колонки должны наследоваться от родителя */
  grid-template-columns: input1;
  gap: 5px;
  height: 100%;
}

.nested-grid > div {
  border: 1px solid green;
  padding: 10px;
  background-color: #dff0d8;
  text-align: center;
}
HTML
<div class="parent-grid">
  <div>1</div>
  <div class="nested-grid-container">
    <div class="nested-grid">
      <div>A</div>
      <div>B</div>
    </div>
  </div>
  <div>3</div>
</div>
Чтобы вложенный грид-контейнер унаследовал определение колонок от родителя, используйте свойство `grid-template-columns` со значением `subgrid` для селектора `.nested-grid`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Выравнивание строк с помощью Subgrid

По аналогии с предыдущим заданием, здесь есть родительский контейнер с тремя строками. Вложенный контейнер занимает две строки родителя. Необходимо настроить вложенный контейнер так, чтобы его строки соответствовали строкам родительской сетки.

CSS
.parent-grid-rows {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  height: 280px; /* Задаем высоту для наглядности строк */
  max-width: 350px;
}

.parent-grid-rows > div {
  border: 1px dashed #999;
  padding: 10px;
  background-color: #e9e9e9;
  text-align: center;
}

.nested-grid-container-rows {
  grid-row: 1 / 3; /* Занимает первые две строки родителя */
  padding: 0;
  border: 1px solid blue;
}

.nested-grid-rows {
  display: grid;
  /* Укажите, что строки должны наследоваться от родителя */
  grid-template-rows: input1;
  gap: 5px;
  height: 100%;
}

.nested-grid-rows > div {
  border: 1px solid green;
  padding: 10px;
  background-color: #dff0d8;
  text-align: center;
}
HTML
<div class="parent-grid-rows">
  <div>1</div>
  <div class="nested-grid-container-rows">
    <div class="nested-grid-rows">
      <div>A</div>
      <div>B</div>
    </div>
  </div>
  <div>3</div>
</div>
Используйте свойство `grid-template-rows` со значением `subgrid` для класса `.nested-grid`, чтобы он унаследовал определение строк от родительского грид-контейнера.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Subgrid для строк и колонок одновременно

В этом примере вложенный грид-контейнер расположен внутри родительской сетки 3x3 и занимает область 2x2. Ваша задача — применить `subgrid` как для строк, так и для колонок, чтобы элементы внутри вложенной сетки полностью соответствовали структуре родительской сетки.

CSS
.parent-grid-both {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 80px);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  max-width: 350px;
}

.parent-grid-both > div {
  border: 1px dashed #999;
  padding: 5px;
  background-color: #e9e9e9;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nested-container-both {
  grid-column: 2 / 4; /* Занимает 2 и 3 колонки */
  grid-row: 1 / 3;    /* Занимает 1 и 2 строки */
  padding: 0;
  border: 1px solid blue;
  /* Сделаем сам контейнер гридом, чтобы вложенный мог стать subgrid */
  display: input1;
}

.nested-grid-both {
  display: grid;
  /* Наследуем колонки от родителя */
  grid-template-columns: input2;
  /* Наследуем строки от родителя */
  grid-template-rows: input3;
  gap: 5px;
  height: 100%;
  width: 100%;
}

.nested-grid-both > div {
  border: 1px solid green;
  padding: 5px;
  background-color: #dff0d8;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
HTML
<div class="parent-grid-both">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="nested-container-both">
    <div class="nested-grid-both">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
    </div>
  </div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
Для того чтобы вложенный грид наследовал и строки, и колонки родителя, необходимо установить значение `subgrid` для обоих свойств: `grid-template-columns` и `grid-template-rows` у элемента с классом `.nested-grid-both`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Размещение элементов внутри Subgrid

Здесь вложенная сетка использует `subgrid` для колонок. Ваша задача — разместить элемент 'B' так, чтобы он начинался со второй колонки родительской сетки и занимал две колонки. Обратите внимание, как нумерация линий и колонок наследуется от родителя.

CSS
.parent-grid-placement {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  max-width: 350px;
}

.parent-grid-placement > div {
  border: 1px dashed #999;
  padding: 10px;
  background-color: #e9e9e9;
  text-align: center;
}

.nested-container-placement {
  grid-column: 1 / 5; /* Занимает все колонки родителя */
  grid-row: 2 / 3;
  padding: 0;
  border: 1px solid blue;
  display: grid; /* Необходимо для subgrid */
}

.nested-grid-placement {
  display: grid;
  grid-template-columns: subgrid; /* Наследуем колонки */
  grid-column: input1; /* Важно: subgrid сам должен занимать колонки родителя */
  gap: 5px;
}

.nested-grid-placement > div {
  border: 1px solid green;
  padding: 10px;
  background-color: #dff0d8;
  text-align: center;
}

.item-b {
  /* Разместите этот элемент со 2-й по 4-ю колонку родителя */
  grid-column: input2;
  background-color: #fcf8e3 !important;
}
HTML
<div class="parent-grid-placement">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="nested-container-placement">
    <div class="nested-grid-placement">
      <div>A</div>
      <div class="item-b">B</div>
    </div>
  </div>
  <div>6</div>
</div>
Поскольку `.nested-grid-placement` использует `subgrid` для колонок, его дочерние элементы могут позиционироваться относительно колонок родительской сетки (`.parent-grid-placement`). Для элемента `.item-b` используйте свойство `grid-column`, чтобы указать начальную и конечную линию или количество занимаемых колонок родительской сетки. Например, `2 / span 2` означает 'начать со 2-й линии и занять 2 колонки'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Карточка товара с использованием Subgrid

Создадим простую карточку товара. Родительский элемент `.card-grid` определяет две основные колонки: для изображения и для информации. Вложенный элемент `.card-info` содержит заголовок, описание и цену. Сделайте так, чтобы `.card-info` стал грид-контейнером и использовал `subgrid` для строк, чтобы его дочерние элементы могли быть выровнены по строкам, неявно созданным в родительской сетке.

CSS
.card-grid {
  display: grid;
  grid-template-columns: 100px 1fr; /* Колонка для картинки и для инфо */
  grid-template-rows: auto 1fr auto; /* Строки для заголовка, описания, цены */
  gap: 10px;
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  max-width: 350px;
  align-items: start;
}

.card-grid img {
  grid-row: 1 / 4; /* Картинка занимает все строки */
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid #eee;
}

.card-info {
  grid-column: 2 / 3; /* Информация занимает вторую колонку */
  grid-row: input1; /* Информация должна занимать все строки */
  display: input2;
  grid-template-rows: input3; /* Наследовать строки от .card-grid */
  gap: 5px; /* Можно добавить отступ между элементами внутри subgrid */
}

.card-info h3 {
  grid-row: 1 / 2; /* Заголовок в первой унаследованной строке */
  margin: 0;
  font-size: 1.1em;
}

.card-info p {
  grid-row: 2 / 3; /* Описание во второй унаследованной строке */
  margin: 0;
  font-size: 0.9em;
}

.card-info span {
  grid-row: 3 / 4; /* Цена в третьей унаследованной строке */
  margin: 0;
  font-weight: bold;
  align-self: end; /* Прижать цену к низу строки */
}
HTML
<div class="card-grid">
  <img src="https://naytikurs.ru/img/7.png" alt="Product Image">
  <div class="card-info">
    <h3>Название товара</h3>
    <p>Краткое описание товара...</p>
    <span>Цена: 1000</span>
  </div>
</div>
Сначала сделайте `.card-info` грид-контейнером, задав ему `display: grid;`. Затем используйте `grid-template-rows: subgrid;`, чтобы строки `.card-info` наследовались от родителя `.card-grid`. Также убедитесь, что сам `.card-info` правильно расположен в родительской сетке с помощью `grid-row`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Subgrid и неявные треки родителя

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

CSS
.parent-implicit {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Две колонки */
  /* grid-template-rows не заданы явно */
  grid-auto-rows: 60px; /* Задаем высоту для неявно создаваемых строк */
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  max-width: 350px;
}

.parent-implicit > div {
  border: 1px dashed #999;
  padding: 10px;
  background-color: #e9e9e9;
  text-align: center;
}

.nested-container-implicit {
  grid-column: 2 / 3; /* Вторая колонка */
  grid-row: 1 / 4;    /* Занимает первые три (неявные) строки */
  padding: 0;
  border: 1px solid blue;
  display: grid;
}

.nested-implicit {
  display: grid;
  grid-template-columns: 1fr; /* Вложенная сетка имеет свою колонку */
  grid-template-rows: input1; /* Наследовать строки от родителя */
  grid-row: input2; /* Убедитесь, что subgrid занимает нужные строки родителя */
  gap: 5px;
  height: 100%;
}

.nested-implicit > div {
  border: 1px solid green;
  padding: 10px;
  background-color: #dff0d8;
  text-align: center;
}
HTML
<div class="parent-implicit">
  <div>1</div>
  <div class="nested-container-implicit">
    <div class="nested-implicit">
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
Даже если строки в родительской сетке (`.parent-implicit`) не определены явно через `grid-template-rows`, они все равно существуют (неявная сетка). Вы можете использовать `grid-template-rows: subgrid;` для `.nested-implicit`, чтобы он унаследовал эти неявные строки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру