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

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

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

Список тем

Начальная строка для элемента

В этой задаче у вас есть сетка 3x3. Ваша цель - разместить элемент с классом `.item-b` так, чтобы он начинался со второй строки сетки. Остальные элементы должны остаться на своих местах.

CSS

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

.grid-item {
  background-color: #4a90e2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-b {
  background-color: #e27d4a;
  input1: 2; /* Укажите начальную строку */
}

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

.grid-item {
  background-color: #4a90e2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-b {
  background-color: #e27d4a;
  input1: 2; /* Укажите начальную строку */
}

HTML

<div class="grid-container">
  <div class="grid-item item-a">A</div>
  <div class="grid-item item-b">B</div>
  <div class="grid-item item-c">C</div>
  <div class="grid-item item-d">D</div>
</div>

Используйте свойство `grid-row-start`, чтобы указать номер начальной линии строки для элемента `.item-b`. Нумерация линий начинается с 1.

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

Результат

Сообщения

Выполнить

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

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

Конечная строка для элемента

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 60px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #50e3c2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-a {
  background-color: #b8e986;
  grid-row-start: 1;
  input1: 4; /* Укажите конечную строку */
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 60px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #50e3c2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-a {
  background-color: #b8e986;
  grid-row-start: 1;
  input1: 4; /* Укажите конечную строку */
}

HTML

<div class="grid-container">
  <div class="grid-item item-a">A</div>
  <div class="grid-item item-b">B</div>
  <div class="grid-item item-c">C</div>
</div>

Примените свойство `grid-row-end` к элементу `.item-a`, чтобы указать линию строки, перед которой он должен закончиться. Помните, что `grid-row-end: 4` означает, что элемент закончится *перед* линией 4.

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

Результат

Сообщения

Выполнить

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

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

Растягивание на несколько строк с помощью span

В сетке 3x3 сделайте так, чтобы элемент `.item-c` начинался со второй строки и занимал две строки по высоте.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 70px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #7ed321;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-c {
  background-color: #f5a623;
  grid-row-start: input1; /* Начальная строка */
  grid-row-end: input2; /* Количество строк для span */
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 70px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #7ed321;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-c {
  background-color: #f5a623;
  grid-row-start: input1; /* Начальная строка */
  grid-row-end: input2; /* Количество строк для span */
}

HTML

<div class="grid-container">
  <div class="grid-item item-a">A</div>
  <div class="grid-item item-b">B</div>
  <div class="grid-item item-c">C</div>
  <div class="grid-item item-d">D</div>
  <div class="grid-item item-e">E</div>
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Использование shorthand grid-row (старт/конец)

С помощью сокращенного свойства `grid-row` разместите элемент `.item-main` так, чтобы он начинался на первой строке и заканчивался перед четвертой строкой в сетке 4x2.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 60px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #bd10e0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-main {
  background-color: #4a4a4a;
  input1: input2 / input3; /* Используйте shorthand */
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 60px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #bd10e0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-main {
  background-color: #4a4a4a;
  input1: input2 / input3; /* Используйте shorthand */
}

HTML

<div class="grid-container">
  <div class="grid-item item-main">MAIN</div>
  <div class="grid-item item-side">SIDE</div>
  <div class="grid-item item-extra">EXTRA</div>
</div>

Используйте свойство `grid-row`. Его значение должно быть в формате `start-line / end-line`. В данном случае, начальная линия - 1, конечная - 4.

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

Результат

Сообщения

Выполнить

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

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

Использование shorthand grid-row (старт/span)

Используя сокращенное свойство `grid-row`, разместите элемент `.item-highlight` так, чтобы он начинался на второй строке и занимал 3 строки по высоте в сетке 5x1.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 50px);
  gap: 5px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #d0021b;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-highlight {
  background-color: #f8e71c;
  color: #333;
  input1: 2 / input2 3; /* Используйте shorthand и span */
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 50px);
  gap: 5px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #d0021b;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-highlight {
  background-color: #f8e71c;
  color: #333;
  input1: 2 / input2 3; /* Используйте shorthand и span */
}

HTML

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

Примените свойство `grid-row`. Значение должно быть в формате `start-line / span count`. Начальная строка - 2, количество занимаемых строк - 3.

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

Результат

Сообщения

Выполнить

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

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

Размещение относительно конца сетки

В сетке 4x3 разместите элемент `.item-last` так, чтобы он начинался на предпоследней строке сетки и занимал одну строку. Используйте отрицательный индекс для указания начальной строки.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 60px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #417505;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-last {
  background-color: #9013fe;
  input1: input2; /* Укажите начальную строку через отрицательный индекс */
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 60px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #417505;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.item-last {
  background-color: #9013fe;
  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-last">LAST</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Отрицательные индексы линий сетки начинаются с -1 (последняя линия). Предпоследняя линия имеет индекс -2. Используйте свойство `grid-row-start` со значением -2.

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

Результат

Сообщения

Выполнить

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

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

Использование именованных линий строк

В этой сетке строки имеют имена: `header-start`, `header-end`, `content-start`, `content-end`, `footer-start`, `footer-end`. Разместите элемент `.content` так, чтобы он начинался на линии `content-start` и заканчивался на линии `content-end`, используя эти имена.

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: [header-start] 50px [header-end content-start] 150px [content-end footer-start] 50px [footer-end];
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
  min-height: 270px;
}

.grid-item {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.header {
  background-color: #4a90e2;
  grid-row: header-start / header-end;
}

.content {
  background-color: #50e3c2;
  input1: input2 / input3; /* Используйте имена линий */
}

.footer {
  background-color: #7ed321;
  grid-row: footer-start / footer-end;
}

                     .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: [header-start] 50px [header-end content-start] 150px [content-end footer-start] 50px [footer-end];
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
  min-height: 270px;
}

.grid-item {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.header {
  background-color: #4a90e2;
  grid-row: header-start / header-end;
}

.content {
  background-color: #50e3c2;
  input1: input2 / input3; /* Используйте имена линий */
}

.footer {
  background-color: #7ed321;
  grid-row: footer-start / footer-end;
}

HTML

<div class="grid-container">
  <div class="grid-item header">Header</div>
  <div class="grid-item content">Content</div>
  <div class="grid-item footer">Footer</div>
</div>

Используйте сокращенное свойство `grid-row` и укажите имена начальной и конечной линий через слеш: `имя-начальной-линии / имя-конечной-линии`.

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

Результат

Сообщения

Выполнить

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

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

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

В сетке 3x2 разместите элемент `.item-b` так, чтобы он начинался со второй строки и занимал две строки (т.е., до конца сетки). Это приведет к тому, что он перекроет элемент `.item-c`, который автоматически размещается в третьей строке.

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 70px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #f5a623;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  opacity: 0.9;
}

.item-b {
  background-color: #9013fe;
  /* Разместите этот элемент со 2 по 4 строку */
  input1: input2 / input3;
  /* Поместим его во второй столбец для наглядности */
  grid-column: 2;
}

                     .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 70px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  max-width: 350px;
}

.grid-item {
  background-color: #f5a623;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  opacity: 0.9;
}

.item-b {
  background-color: #9013fe;
  /* Разместите этот элемент со 2 по 4 строку */
  input1: input2 / input3;
  /* Поместим его во второй столбец для наглядности */
  grid-column: 2;
}

HTML

<div class="grid-container">
  <div class="grid-item item-a">A</div>
  <div class="grid-item item-b">B (Overlap)</div>
  <div class="grid-item item-c">C</div>
  <div class="grid-item item-d">D</div>
</div>

Используйте свойство `grid-row` для элемента `.item-b`. Укажите начальную строку (2) и конечную строку. Конечная строка сетки 3x2 - это линия 4. Значение будет `2 / 4`.

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

Результат

Сообщения

Выполнить

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

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