Размещение элементов: grid-column [Модуль 7: CSS Grid Layout]: Тренажер CSS

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

В этой серии упражнений вы попрактикуетесь в использовании свойства `grid-column` для управления размещением элементов по горизонтальной оси в CSS Grid раскладке. Задания охватывают различные способы указания начальной и конечной линий сетки, включая использование числовых индексов, ключевого слова `span` и отрицательных индексов. Вы научитесь точно контролировать, какие колонки сетки будет занимать элемент, решая задачи от базового позиционирования до более сложных сценариев размещения.

Список тем

Занять первые две колонки

id: 37277_grid-column-1

Используя числовые индексы линий сетки, сделайте так, чтобы первый элемент (`item-1`) располагался начиная с первой вертикальной линии сетки и заканчивался на третьей вертикальной линии. Это заставит элемент занять первые две колонки.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-1 {
  background-color: #2196F3;
  /* Заставьте этот элемент занять колонки с 1 по 2 */
  input1: input2 / input3;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-1 {
  background-color: #2196F3;
  /* Заставьте этот элемент занять колонки с 1 по 2 */
  input1: input2 / input3;
}

HTML

<div class="grid-container">
  <div class="grid-item item-1">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-column`. Оно принимает два значения через слеш (`/`): номер начальной линии и номер конечной линии. Линии сетки нумеруются начиная с 1.

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

Результат

Сообщения

Выполнить

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

Занять две колонки с помощью span

id: 37277_grid-column-2

Сделайте так, чтобы второй элемент (`item-2`) начинался со второй вертикальной линии сетки и занимал две колонки в ширину. Используйте ключевое слово `span` для указания количества занимаемых колонок.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-2 {
  background-color: #ff9800;
  /* Заставьте этот элемент начаться со 2-й линии и занять 2 колонки */
  grid-column: input1 / input2 input3;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-2 {
  background-color: #ff9800;
  /* Заставьте этот элемент начаться со 2-й линии и занять 2 колонки */
  grid-column: input1 / input2 input3;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item item-2">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-column`. Чтобы указать количество занимаемых колонок вместо конечной линии, используйте ключевое слово `span`, за которым следует число колонок. Например, `2 / span 2` означает 'начать со 2-й линии и занять 2 колонки'.

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

Результат

Сообщения

Выполнить

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

Занять колонку до указанной линии

id: 37277_grid-column-3

Измените CSS для третьего элемента (`item-3`) так, чтобы он занимал две колонки, начиная с первой. Используйте ключевое слово `span` в сочетании с конечной линией сетки.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-3 {
  background-color: #e91e63;
  /* Заставьте этот элемент занять 2 колонки, заканчиваясь на 3-й линии */
  grid-column: input1 input2 / input3;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-3 {
  background-color: #e91e63;
  /* Заставьте этот элемент занять 2 колонки, заканчиваясь на 3-й линии */
  grid-column: input1 input2 / input3;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item item-3">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

Свойство `grid-column` также позволяет использовать `span` перед начальной линией. Например, `span 2 / 4` означает 'занять 2 колонки, заканчиваясь на 4-й линии'.

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

Результат

Сообщения

Выполнить

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

Занять все колонки до последней линии

id: 37277_grid-column-4

Сделайте так, чтобы первый элемент (`item-1`) растянулся от первой вертикальной линии сетки до самой последней. Используйте отрицательный индекс для обозначения последней линии.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-1 {
  background-color: #673ab7;
  /* Заставьте этот элемент занять все колонки от 1-й до последней линии */
  grid-column: input1 / input2;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-1 {
  background-color: #673ab7;
  /* Заставьте этот элемент занять все колонки от 1-й до последней линии */
  grid-column: input1 / input2;
}

HTML

<div class="grid-container">
  <div class="grid-item item-1">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>

В CSS Grid линии можно нумеровать и в обратном порядке, начиная с -1 для самой последней линии. Чтобы элемент занял все колонки от начала до конца, используйте `grid-column: 1 / -1;`.

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

Результат

Сообщения

Выполнить

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

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

id: 37277_grid-column-5

Расположите четвертый элемент (`item-4`) так, чтобы он занимал две последние колонки сетки. Используйте отрицательные индексы для указания начальной и конечной линий.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-4 {
  background-color: #00bcd4;
  /* Заставьте этот элемент занять две последние колонки */
  grid-column: input1 / input2;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-4 {
  background-color: #00bcd4;
  /* Заставьте этот элемент занять две последние колонки */
  grid-column: input1 / input2;
}

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 item-4">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

Отрицательные индексы отсчитываются с конца сетки: -1 - последняя линия, -2 - предпоследняя, и так далее. Чтобы занять две последние колонки в сетке из 4 колонок (5 линий), элемент должен начинаться на линии -3 и заканчиваться на линии -1.

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

Результат

Сообщения

Выполнить

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

Указание только начальной линии

id: 37277_grid-column-6

Иногда нужно указать только начальную линию, и элемент займет одну колонку. Сделайте так, чтобы пятый элемент (`item-5`) начинался с третьей вертикальной линии сетки. Он должен занять только одну колонку.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-5 {
  background-color: #8bc34a;
  /* Заставьте этот элемент начаться с 3-й линии (займет одну колонку) */
  input1: input2;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.item-5 {
  background-color: #8bc34a;
  /* Заставьте этот элемент начаться с 3-й линии (займет одну колонку) */
  input1: input2;
}

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 item-5">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

Если в `grid-column` указать только одно значение (число), оно будет интерпретировано как `grid-column-start`. Элемент по умолчанию займет одну колонку (`span 1`).

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

Результат

Сообщения

Выполнить

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

Комбинирование grid-row и grid-column

id: 37277_grid-column-7

Разместите элемент с классом `special-item` так, чтобы он начинался со второй строки (row) и занимал колонки со второй по четвертую (не включительно, т.е. 2 и 3).

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 200px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.special-item {
  background-color: #ffeb3b;
  color: #333;
  /* Начать со 2-й строки */
  grid-row-start: 2;
  /* Занять колонки со 2-й по 4-ю линию */
  input1: input2 / input3;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 200px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.special-item {
  background-color: #ffeb3b;
  color: #333;
  /* Начать со 2-й строки */
  grid-row-start: 2;
  /* Занять колонки со 2-й по 4-ю линию */
  input1: input2 / input3;
}

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 special-item">Special</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
</div>

Используйте `grid-row-start` (или `grid-row`) для указания строки и `grid-column` для указания колонок. Чтобы занять колонки со 2-й по 4-ю линию, используйте значение `2 / 4`.

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

Результат

Сообщения

Выполнить

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

Перекрытие элементов

id: 37277_grid-column-8

В этой сетке два элемента (`item-1` и `item-2`). Сделайте так, чтобы `item-1` занимал колонки с 1 по 3, а `item-2` занимал колонки со 2 по 4. Это приведет к их частичному перекрытию во второй колонке.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
  position: relative; /* Для контекста наложения */
}

.grid-item {
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  opacity: 0.8; /* Чтобы видеть перекрытие */
}

.item-1 {
  background-color: #2196F3;
  /* Занять колонки с 1 по 3 линию */
  grid-column: input1 / input2;
  z-index: 1; /* Чтобы был поверх */
}

.item-2 {
  background-color: #ff9800;
  /* Занять колонки со 2 по 4 линию */
  grid-column: input3 / input4;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: #f3f3f3;
  padding: 10px;
  border-radius: 5px;
  min-height: 150px;
  position: relative; /* Для контекста наложения */
}

.grid-item {
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  opacity: 0.8; /* Чтобы видеть перекрытие */
}

.item-1 {
  background-color: #2196F3;
  /* Занять колонки с 1 по 3 линию */
  grid-column: input1 / input2;
  z-index: 1; /* Чтобы был поверх */
}

.item-2 {
  background-color: #ff9800;
  /* Занять колонки со 2 по 4 линию */
  grid-column: input3 / input4;
}

HTML

<div class="grid-container">
  <div class="grid-item item-1">Item 1</div>
  <div class="grid-item item-2">Item 2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Задайте свойство `grid-column` для обоих элементов. Для `item-1` используйте значение, охватывающее линии 1 и 3 (`1 / 3`). Для `item-2` используйте значение, охватывающее линии 2 и 4 (`2 / 4`).

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

Результат

Сообщения

Выполнить

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