Свойство grid-template-areas

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

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

На этой странице собраны упражнения для тренировки использования свойства `grid-template-areas` в CSS Grid Layout. Вы будете работать с готовым HTML и CSS кодом, где вам нужно будет заполнить пропущенные части, чтобы определить и применить именованные области сетки. Задания построены от простого определения областей до создания более сложных макетов страниц, включая использование пустых ячеек и объединение ячеек в одну область. Это поможет вам закрепить синтаксис и возможности `grid-template-areas` для создания структурированных и адаптивных макетов.

Список тем

Определение простой сетки 2x2

Создайте базовую сеточную структуру 2x2. Определите четыре именованные области: 'шапка' (header), 'сайдбар' (sidebar), 'контент' (content) и 'подвал' (footer). Расположите их в сетке согласно этим именам.

CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 150px;
  gap: 5px;
  /* Определите области сетки */
  input1: 
    "header sidebar"
    "content footer";
  width: 300px;
  height: 210px; /* 50 + 150 + 5 */
}

.header { grid-area: header; background-color: #f0a2a2; }
.sidebar { grid-area: sidebar; background-color: #a2f0a2; }
.content { grid-area: content; background-color: #a2a2f0; }
.footer { grid-area: footer; background-color: #f0f0a2; }

/* Стили для наглядности */
.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border: 1px solid #ccc;
}
HTML
<div class="container">
  <div class="header">Шапка</div>
  <div class="sidebar">Сайдбар</div>
  <div class="content">Контент</div>
  <div class="footer">Подвал</div>
</div>
Используйте свойство `grid-template-areas`. Внутри значения свойства определите две строки в кавычках. В первой строке укажите имена областей 'шапка' и 'сайдбар', разделенные пробелом. Во второй строке укажите 'контент' и 'подвал', также разделенные пробелом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Назначение областей элементам

У вас есть сетка с уже определенными областями 'top', 'left', 'main', 'bottom'. Ваша задача — правильно назначить эти области соответствующим элементам с классами 'box-a', 'box-b', 'box-c', 'box-d', чтобы они заняли свои места в сетке.

CSS
.container {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 50px 1fr 50px;
  gap: 5px;
  grid-template-areas:
    "top top"
    "left main"
    "bottom bottom";
  width: 320px;
  height: 250px;
  border: 1px solid grey;
}

.box-a { input1: top; background-color: #ffcccc; }
.box-b { input2: left; background-color: #ccffcc; }
.box-c { input3: main; background-color: #ccccff; }
.box-d { input4: bottom; background-color: #ffffcc; }

/* Стили для наглядности */
.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
HTML
<div class="container">
  <div class="box-a">A (top)</div>
  <div class="box-b">B (left)</div>
  <div class="box-c">C (main)</div>
  <div class="box-d">D (bottom)</div>
</div>
Используйте свойство `grid-area` для каждого элемента (`.box-a`, `.box-b`, `.box-c`, `.box-d`). В качестве значения укажите имя соответствующей области из `grid-template-areas` ('top', 'left', 'main', 'bottom').
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование пустых ячеек

Создайте макет 3x2. Первая строка должна содержать 'header', занимающий обе колонки. Вторая строка должна иметь 'sidebar' слева и 'content' справа. Третья строка должна содержать 'footer', но только в правой колонке, левая ячейка должна остаться пустой.

CSS
.container {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 50px 150px 50px;
  gap: 5px;
  grid-template-areas:
    "header header"
    "sidebar content"
    input1; /* Заполните третью строку */
  width: 300px;
  height: 260px; /* 50 + 150 + 50 + 5 + 5 */
}

.header { grid-area: header; background-color: #f0a2a2; }
.sidebar { grid-area: sidebar; background-color: #a2f0a2; }
.content { grid-area: content; background-color: #a2a2f0; }
.footer { grid-area: footer; background-color: #f0f0a2; }

/* Стили для наглядности */
.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border: 1px solid #ccc;
}
HTML
<div class="container">
  <div class="header">Шапка</div>
  <div class="sidebar">Сайдбар</div>
  <div class="content">Контент</div>
  <div class="footer">Подвал</div>
</div>
В свойстве `grid-template-areas` определите три строки в кавычках. Для первой строки используйте 'header header'. Для второй — 'sidebar content'. Для третьей строки используйте символ точки `.` для обозначения пустой ячейки слева и 'footer' справа: '. footer'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Объединение ячеек в одну область

Создайте сетку 3x3. Необходимо определить область 'main', которая будет занимать центральную ячейку и ячейку справа от нее во втором ряду. Остальные области ('top-left', 'top-mid', 'top-right', 'btm-left', 'btm-mid', 'btm-right', 'mid-left') должны занимать по одной ячейке.

CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 80px);
  gap: 5px;
  grid-template-areas:
    "top-left top-mid top-right"
    input1 /* Заполните вторую строку */
    "btm-left btm-mid btm-right";
  width: 300px;
  height: 250px; /* 3*80 + 2*5 */
}

.tl { grid-area: top-left; background-color: #eee; }
.tm { grid-area: top-mid; background-color: #ddd; }
.tr { grid-area: top-right; background-color: #ccc; }
.ml { grid-area: mid-left; background-color: #bbb; }
.main { grid-area: main; background-color: #f0a2a2; }
.bl { grid-area: btm-left; background-color: #aaa; }
.bm { grid-area: btm-mid; background-color: #999; }
.br { grid-area: btm-right; background-color: #888; }

/* Стили для наглядности */
.container > div {
  display: flex; justify-content: center; align-items: center; font-size: 12px; border: 1px solid #777;
}
HTML
<div class="container">
  <div class="tl">TL</div>
  <div class="tm">TM</div>
  <div class="tr">TR</div>
  <div class="ml">ML</div>
  <div class="main">MAIN</div>
  <div class="bl">BL</div>
  <div class="bm">BM</div>
  <div class="br">BR</div>
</div>
В свойстве `grid-template-areas` определите три строки. Во второй строке используйте имя 'main' дважды подряд, чтобы оно заняло две смежные ячейки: 'mid-left main main'. Остальные ячейки заполните уникальными именами.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Сложный макет с пустыми ячейками и объединением

Реализуйте макет 4x3. Шапка ('head') занимает всю первую строку. Второй ряд: пустая ячейка, основной контент ('main'), правый сайдбар ('side'). Третий ряд: левый сайдбар ('left'), основной контент ('main'), правый сайдбар ('side'). Четвертый ряд: подвал ('foot'), занимающий все три колонки.

CSS
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 50px 100px 100px 50px;
  gap: 5px;
  input1: 
    "head head head"
    input2
    "left main side"
    input3;
  width: 350px;
  height: 315px; /* 50+100+100+50 + 3*5 */
}

.h { grid-area: head; background-color: #f8b195; }
.l { grid-area: left; background-color: #f67280; }
.m { grid-area: main; background-color: #c06c84; }
.s { grid-area: side; background-color: #6c5b7b; }
.f { grid-area: foot; background-color: #355c7d; }

/* Стили для наглядности */
.container > div {
  display: flex; justify-content: center; align-items: center; font-size: 14px; color: white; border: 1px solid #ccc;
}
HTML
<div class="container">
  <div class="h">Шапка</div>
  <div class="l">Лево</div>
  <div class="m">Центр</div>
  <div class="s">Право</div>
  <div class="f">Подвал</div>
</div>
Вам нужно определить 4 строки в `grid-template-areas`. Первая строка: 'head head head'. Вторая строка: '. main side'. Третья строка: 'left main side'. Четвертая строка: 'foot foot foot'. Обратите внимание, что 'main' и 'side' занимают ячейки в двух строках.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Макет с изображением

Создайте макет 2x2. Верхняя строка должна содержать заголовок ('title') слева и логотип ('logo') справа. Нижняя строка должна полностью быть занята описанием ('desc'). Примените заданные области к соответствующим элементам.

CSS
.card {
  display: grid;
  grid-template-columns: 1fr 80px;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  width: 300px;
  height: 200px;
  input1: 
    "title logo"
    "desc desc";
}

.title { 
  input2: title; 
  background-color: #e0e0e0; 
  padding: 5px; 
  font-weight: bold; 
  align-self: center; 
}
.logo { 
  input3: logo; 
}
.logo img {
  width: 100%;
  height: auto;
  display: block;
}
.desc { 
  input4: desc; 
  background-color: #f5f5f5; 
  padding: 5px; 
  font-size: 14px; 
}
HTML
<div class="card">
  <div class="title">Заголовок карточки</div>
  <div class="logo"><img src="https://naytikurs.ru/img/1.png" alt="Лого"></div>
  <div class="desc">Длинное описание карточки, которое занимает всю нижнюю часть и расположено под заголовком и логотипом.</div>
</div>
Определите `grid-template-areas` с двумя строками: '"title logo"' и '"desc desc"'. Затем назначьте эти области элементам с классами 'title', 'logo', 'desc' с помощью свойства `grid-area`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Изменение порядка областей

Используя тот же HTML, что и в первом задании, измените макет. Теперь сайдбар ('sidebar') должен быть справа, а контент ('content') слева во второй строке. Шапка ('header') и подвал ('footer') остаются на своих местах (верхняя и нижняя строки, занимая всю ширину).

CSS
.container {
  display: grid;
  /* Измените колонки и строки для нового макета */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 150px 50px;
  gap: 5px;
  grid-template-areas: 
    "header header"
    input1 /* Измените эту строку */
    "footer footer";
  width: 300px;
  height: 260px; /* 50 + 150 + 50 + 5 + 5 */
}

.header { grid-area: header; background-color: #f0a2a2; }
.sidebar { grid-area: sidebar; background-color: #a2f0a2; }
.content { grid-area: content; background-color: #a2a2f0; }
.footer { grid-area: footer; background-color: #f0f0a2; }

/* Стили для наглядности */
.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border: 1px solid #ccc;
}
HTML
<div class="container">
  <div class="header">Шапка</div>
  <div class="sidebar">Сайдбар</div>
  <div class="content">Контент</div>
  <div class="footer">Подвал</div>
</div>
Измените значение свойства `grid-template-areas`. Первая строка должна быть '"header header"'. Вторая строка должна стать '"content sidebar"'. Третья строка должна быть '"footer footer"'. Также не забудьте обновить `grid-template-rows` и `grid-template-columns`, чтобы соответствовать новому макету (например, 2 колонки и 3 строки).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру