Сокращенная запись grid-area

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

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

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

Список тем

Размещение элемента в именованной области

Используйте свойство `grid-area`, чтобы разместить элемент с классом `item-header` в grid-области с именем `header`. Структура сетки уже определена с помощью `grid-template-areas`.

CSS
.grid-container-1 {
  display: grid;
  height: 280px;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}

.grid-container-1 > div {
  border: 1px dashed dodgerblue;
  padding: 10px;
  text-align: center;
}

.item-header {
  background-color: lightblue;
  input1: input2;
}

.item-sidebar {
  background-color: lightcoral;
  grid-area: sidebar;
}

.item-content {
  background-color: lightgoldenrodyellow;
  grid-area: content;
}

.item-footer {
  background-color: lightgreen;
  grid-area: footer;
}
HTML
<div class="grid-container-1">
  <div class="item-header">Header</div>
  <div class="item-sidebar">Sidebar</div>
  <div class="item-content">Content</div>
  <div class="item-footer">Footer</div>
</div>
Для размещения элемента в именованной grid-области используйте свойство `grid-area` с именем этой области в качестве значения. Например: `grid-area: area-name;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Размещение по номерам линий сетки

Используйте сокращенное свойство `grid-area`, чтобы разместить элемент с классом `special-item` так, чтобы он начинался со 2-й линии строки и 1-й линии колонки, а заканчивался перед 3-й линией строки и 3-й линией колонки.

CSS
.grid-container-2 {
  display: grid;
  height: 200px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}

.grid-container-2 > div {
  border: 1px dashed dodgerblue;
  padding: 10px;
  text-align: center;
  background-color: lightblue;
}

.special-item {
  background-color: lightcoral;
  input1: input2 / input3 / input4 / input5;
}
HTML
<div class="grid-container-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="special-item">Special</div>
  <div>5</div>
  <div>6</div>
</div>
Сокращенное свойство `grid-area` может принимать четыре значения через слеш (`/`): `grid-row-start / grid-column-start / grid-row-end / grid-column-end`. Используйте числовые значения линий сетки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Размещение с использованием span

Разместите элемент `main-content`, используя `grid-area`. Он должен начинаться со 2-й линии строки и 1-й линии колонки и занимать (span) 1 строку и 2 колонки.

CSS
.grid-container-3 {
  display: grid;
  height: 250px;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}

.grid-container-3 > div {
  border: 1px dashed dodgerblue;
  padding: 10px;
  text-align: center;
}

.header {
  background-color: lightblue;
  grid-column: 1 / -1; /* Spans all columns */
}

.sidebar {
  background-color: lightcoral;
  grid-row: 2 / 3;
}

.main-content {
  background-color: lightgoldenrodyellow;
  input1: 2 / 1 / input2 / input3;
}

.footer {
  background-color: lightgreen;
  grid-column: 1 / -1; /* Spans all columns */
  grid-row: 3 / 4;
}
HTML
<div class="grid-container-3">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main-content">Main Content</div>
  <div class="footer">Footer</div>
</div>
В сокращенной записи `grid-area: row-start / col-start / row-end / col-end;` вместо конечной линии можно указать `span N`, где N - количество строк или колонок, которые должен занять элемент. Например: `grid-area: 2 / 1 / span 1 / span 2;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Размещение по именованным линиям

В этой сетке заданы именованные линии. Используйте `grid-area`, чтобы разместить элемент `highlight` так, чтобы он начинался на линии `content-start` по вертикали и `main-start` по горизонтали, а заканчивался на линии `content-end` по вертикали и `main-end` по горизонтали.

CSS
.grid-container-4 {
  display: grid;
  height: 300px;
  grid-template-columns: [sidebar-start] 1fr [sidebar-end main-start] 2fr [main-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  gap: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}

.grid-container-4 > div {
  border: 1px dashed dodgerblue;
  padding: 10px;
  text-align: center;
}

.header {
  background-color: lightblue;
  grid-area: header-start / sidebar-start / header-end / main-end;
}

.sidebar {
  background-color: lightcoral;
  grid-area: content-start / sidebar-start / content-end / sidebar-end;
}

.highlight {
  background-color: lightgoldenrodyellow;
  input1: input2 / input3 / input4 / input5;
}

.footer {
  background-color: lightgreen;
  grid-area: footer-start / sidebar-start / footer-end / main-end;
}
HTML
<div class="grid-container-4">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="highlight">Highlight</div>
  <div class="footer">Footer</div>
</div>
Свойство `grid-area` может принимать имена линий вместо номеров: `grid-area: row-start-name / col-start-name / row-end-name / col-end-name;`. Используйте имена линий, определенные в `grid-template-rows` и `grid-template-columns`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Комбинированное размещение элементов

Используйте `grid-area` для позиционирования двух элементов: `logo` должен быть помещен в именованную область `logo-area`. Элемент `main-image` должен располагаться, начиная со 2-й линии строки и 2-й линии колонки, и занимать 1 строку и 1 колонку.

CSS
.grid-container-5 {
  display: grid;
  height: 300px;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "logo-area menu-area"
    "sidebar-area main-area"
    "sidebar-area main-area"
    "footer-area footer-area";
  gap: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}

.grid-container-5 > div {
  border: 1px dashed dodgerblue;
  padding: 5px;
  text-align: center;
  overflow: hidden; /* To contain the image */
}

.logo {
  background-color: lightblue;
  input1: input2;
}

.menu {
  background-color: lightcoral;
  grid-area: menu-area;
}

.sidebar {
  background-color: lightgoldenrodyellow;
  grid-area: sidebar-area;
}

.main-image {
  background-color: lightcyan;
  input3: input4 / input5 / input6 / input7;
}

.footer {
  background-color: lightgreen;
  grid-area: footer-area;
}
HTML
<div class="grid-container-5">
  <div class="logo">Logo</div>
  <div class="menu">Menu</div>
  <div class="sidebar">Sidebar</div>
  <div class="main-image">
    <img src="https://naytikurs.ru/img/7.png" alt="Example image" style="max-width: 100%; height: auto; display: block;">
  </div>
  <div class="footer">Footer</div>
</div>
Для `logo` используйте синтаксис `grid-area` с именем области. Для `main-image` используйте синтаксис `grid-area` с четырьмя значениями (номерами линий или `span`). Помните, что `grid-area: 2 / 2 / 3 / 3;` эквивалентно `grid-area: 2 / 2 / span 1 / span 1;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Переопределение положения элемента

Элемент `advert` по умолчанию размещается автоматически. Используйте `grid-area`, чтобы явно поместить его в правый верхний угол сетки, начиная с 1-й линии строки и 3-й линии колонки, и занимая одну ячейку (1 строку, 1 колонку).

CSS
.grid-container-6 {
  display: grid;
  height: 200px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}

.grid-container-6 > div {
  border: 1px dashed dodgerblue;
  padding: 10px;
  text-align: center;
  background-color: lightblue;
}

.advert {
  background-color: lightcoral;
  /* По умолчанию этот блок был бы третьим */
  input1: input2 / input3 / input4 / input5;
}
HTML
<div class="grid-container-6">
  <div>Item 1</div>
  <div>Item 2</div>
  <div class="advert">Advert</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
Даже если элемент имеет свое естественное место в потоке HTML, свойство `grid-area` (с указанием линий) переопределит его положение в сетке. Используйте числовые значения линий или `span` для задания области `1 / 3 / 2 / 4` или `1 / 3 / span 1 / span 1`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру