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

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

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

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

Список тем

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

id: 37281_gta-01

Создайте базовую сеточную структуру 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`. Внутри значения свойства определите две строки в кавычках. В первой строке укажите имена областей 'шапка' и 'сайдбар', разделенные пробелом. Во второй строке укажите 'контент' и 'подвал', также разделенные пробелом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37281_gta-02

У вас есть сетка с уже определенными областями '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').
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37281_gta-03

Создайте макет 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'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37281_gta-04

Создайте сетку 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'. Остальные ячейки заполните уникальными именами.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37281_gta-05

Реализуйте макет 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' занимают ячейки в двух строках.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37281_gta-06

Создайте макет 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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37281_gta-07

Используя тот же 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 строки).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру