Размещение элементов: grid-column: Тренажер CSS

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

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

Список тем

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

Используя числовые индексы линий сетки, сделайте так, чтобы первый элемент (`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

Сделайте так, чтобы второй элемент (`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 колонки'.

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

Результат

Сообщения

Выполнить

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

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

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

Измените 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-й линии'.

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

Результат

Сообщения

Выполнить

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

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

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

Сделайте так, чтобы первый элемент (`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;`.

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

Результат

Сообщения

Выполнить

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

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

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

Расположите четвертый элемент (`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.

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

Результат

Сообщения

Выполнить

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

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

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

Иногда нужно указать только начальную линию, и элемент займет одну колонку. Сделайте так, чтобы пятый элемент (`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

Разместите элемент с классом `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`.

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

Результат

Сообщения

Выполнить

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

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

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

В этой сетке два элемента (`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`).

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

Результат

Сообщения

Выполнить

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

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