Именованные линии и области

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

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

Эта серия упражнений поможет вам освоить и закрепить использование именованных линий и областей в CSS Grid Layout. Вы будете работать с готовыми HTML-структурами и CSS-стилями, в которых нужно будет заполнить пропущенные части кода. Задания построены по принципу 'от простого к сложному': сначала вы научитесь задавать имена линиям и областям, а затем использовать эти имена для позиционирования элементов внутри грид-контейнера. Теории здесь нет – только практика для оттачивания навыков размещения элементов с помощью удобных и читаемых имен.

Список тем

Именование колоночных линий

В этом задании вам нужно определить имена для вертикальных (колоночных) линий грид-контейнера. Задайте имена 'content-start' для первой линии, 'content-end' для второй линии. Это позволит в дальнейшем ссылаться на них при размещении элементов.

CSS
.container {
  display: grid;
  grid-template-columns: input1 1fr input2 1fr;
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
Имена линиям задаются внутри квадратных скобок `[]` непосредственно в свойствах `grid-template-columns` или `grid-template-rows`. Для именования первой линии перед определением размера первой колонки добавьте `[content-start]`, а для второй линии - `[content-end]` перед размером второй колонки или после размера первой, если она одна.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Именование строчных линий

Теперь давайте зададим имена для горизонтальных (строчных) линий. Присвойте имя 'header-start' первой линии, 'header-end' второй линии и 'main-start' также второй линии (да, линии могут иметь несколько имен!). Имя 'main-end' присвойте третьей линии.

CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: input1 50px input2 1fr input3 50px;
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item {
  background-color: #2196F3;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}
HTML
<div class="container">
  <div class="item">H1</div>
  <div class="item">H2</div>
  <div class="item">M1</div>
  <div class="item">M2</div>
  <div class="item">F1</div>
  <div class="item">F2</div>
</div>
Имена строчным линиям задаются аналогично колоночным, но в свойстве `grid-template-rows`. Используйте квадратные скобки `[]`. Для второй линии можно указать несколько имен через пробел внутри одних скобок: `[header-end main-start]`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Создание именованных областей

Определите структуру грида с помощью именованных областей. Создайте три области: 'header', 'main' и 'footer'. Область 'header' должна занимать всю первую строку, 'main' - всю вторую строку, а 'footer' - всю третью.

CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  input1: 
    "header header"
    "main main"
    "footer footer";
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item-header { grid-area: header; background-color: #FF9800; }
.item-main { grid-area: main; background-color: #4CAF50; }
.item-footer { grid-area: footer; background-color: #2196F3; }

.item {
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}
HTML
<div class="container">
  <div class="item item-header">Header</div>
  <div class="item item-main">Main Content</div>
  <div class="item item-footer">Footer</div>
</div>
Для определения именованных областей используется свойство `grid-template-areas`. Его значением является строка (или несколько строк в кавычках), описывающая раскладку. Каждое слово в строке соответствует имени области в ячейке грида. Используйте одинаковые имена для ячеек, которые должна занимать одна область.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Размещение элемента по имени колоночных линий

Используя ранее определенные имена колоночных линий ('col-start', 'col-mid', 'col-end'), разместите элемент с классом 'special-item' так, чтобы он начинался от линии 'col-start' и заканчивался на линии 'col-mid'.

CSS
.container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-mid] 1fr [col-end];
  grid-template-rows: 100px 100px;
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item {
  background-color: #607D8B;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.special-item {
  background-color: #E91E63;
  input1: col-start;
  input2: col-mid;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item special-item">Special</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
Для размещения элемента по горизонтали используйте свойства `grid-column-start` и `grid-column-end` или сокращенное свойство `grid-column`. В качестве значений укажите имена линий, которые вы определили в `grid-template-columns`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Размещение элемента по имени строчных линий

Задайте положение элемента с классом 'highlight' по вертикали. Он должен начинаться от линии 'content-start' и заканчиваться на линии 'content-end', используя имена, определенные в `grid-template-rows`.

CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: [row1-start] 50px [content-start] 1fr [content-end] 50px [row4-start];
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item {
  background-color: #795548;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}

.highlight {
  background-color: #FFC107;
  grid-column: 1 / 2; /* Занимает первую колонку */
  input1: content-start / content-end; 
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item highlight">Highlight</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
Для размещения элемента по вертикали используются свойства `grid-row-start` и `grid-row-end` или сокращенное свойство `grid-row`. Укажите в качестве значений имена строчных линий.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

В контейнере определены области 'header', 'sidebar', 'content', 'footer'. Разместите элемент с классом 'sidebar-item' в область с именем 'sidebar'.

CSS
.container {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
  min-height: 300px;
}

.item {
  color: white;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
}

.header-item { grid-area: header; background-color: #FF5722; }
.content-item { grid-area: content; background-color: #8BC34A; }
.footer-item { grid-area: footer; background-color: #03A9F4; }

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

Области с пустыми ячейками

Определите именованные области 'top', 'middle', 'bottom'. Область 'top' должна занимать первую ячейку первой строки, 'middle' - вторую ячейку второй строки, а 'bottom' - третью ячейку третьей строки. Остальные ячейки должны остаться пустыми.

CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 80px);
  grid-template-areas: 
    input1
    input2
    input3;
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item-top { grid-area: top; background-color: #f44336; }
.item-middle { grid-area: middle; background-color: #ffeb3b; color: #333 !important;}
.item-bottom { grid-area: bottom; background-color: #00bcd4; }

.item {
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}
HTML
<div class="container">
  <div class="item item-top">Top</div>
  <div class="item item-middle">Middle</div>
  <div class="item item-bottom">Bottom</div>
</div>
В значении свойства `grid-template-areas` используйте точку `.` для обозначения пустой ячейки, которая не будет принадлежать ни одной именованной области.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Размещение элемента с охватом колонок по именам линий

Разместите элемент 'wide-item' так, чтобы он начинался от линии 'start' и заканчивался на линии 'end', охватывая таким образом все три колонки. Используйте имена линий, определенные в `grid-template-columns`.

CSS
.container {
  display: grid;
  grid-template-columns: [start] 1fr [mid1] 1fr [mid2] 1fr [end];
  grid-template-rows: 100px 100px;
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item {
  background-color: #9E9E9E;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.wide-item {
  background-color: #3F51B5;
  input1: start / end;
  grid-row: 1; /* Размещаем в первой строке */
}
HTML
<div class="container">
  <div class="item wide-item">Wide Item</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
Используйте сокращенное свойство `grid-column` со значением в формате `start-line-name / end-line-name`, чтобы указать начальную и конечную линии для элемента.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Элемент 'tall-item' должен занимать пространство по вертикали от линии 'content-start' до линии 'footer-start'. Используйте имена линий, заданные в `grid-template-rows`.

CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: [header-start] 50px [content-start] 1fr [footer-start] 50px [footer-end];
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item {
  background-color: #009688;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}

.tall-item {
  background-color: #FF5722;
  grid-column: 1; /* Размещаем в первой колонке */
  input1: content-start / footer-start;
}
HTML
<div class="container">
  <div class="item">H1</div>
  <div class="item">H2</div>
  <div class="item tall-item">Tall</div>
  <div class="item">M2</div>
  <div class="item">F1</div>
  <div class="item">F2</div>
</div>
Используйте свойство `grid-row` со значением в формате `start-line-name / end-line-name`, чтобы указать начальную и конечную строчные линии для элемента.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Грид-контейнер использует `grid-template-areas`. Разместите элемент 'special' так, чтобы он начинался у левой границы области 'content' и заканчивался у правой границы области 'content' по горизонтали. Используйте для этого неявные имена линий, создаваемые областями.

CSS
.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav content aside"
    "footer footer footer";
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item { padding: 10px; text-align: center; border-radius: 5px; color: white; }
.header { grid-area: header; background-color: #673AB7; }
.nav { grid-area: nav; background-color: #CDDC39; }
.content { grid-area: content; background-color: #4CAF50; }
.aside { grid-area: aside; background-color: #FFC107; }
.footer { grid-area: footer; background-color: #03A9F4; }

.special {
  background-color: #E91E63;
  /* Размещаем во второй строке, где область content */
  grid-row-start: content-start; 
  grid-row-end: content-end;
  input1: content-start;
  input2: content-end;
}
HTML
<div class="container">
  <div class="item header">Header</div>
  <div class="item nav">Nav</div>
  <div class="item content">
      Content Area
      <div class="item special">Special Item</div>
  </div>
  <div class="item aside">Aside</div>
  <div class="item footer">Footer</div>
</div>
Когда вы определяете именованные области с помощью `grid-template-areas`, CSS Grid автоматически создает именованные линии с суффиксами '-start' и '-end' для каждой области. Например, для области 'content' создаются линии 'content-start' и 'content-end'. Используйте эти имена в свойствах `grid-column-start` и `grid-column-end` (или `grid-column`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Комбинирование именованных линий и span

Разместите элемент 'banner' так, чтобы он начинался от линии 'main-start' и охватывал 2 колонки по горизонтали. Используйте имя линии и ключевое слово `span`.

CSS
.container {
  display: grid;
  grid-template-columns: [col1-start] 1fr [main-start] 1fr 1fr [col4-start];
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px;
}

.item {
  background-color: #8BC34A;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.banner {
  background-color: #00BCD4;
  input1: main-start / span 2;
  grid-row: 1;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item banner">Banner</div>
  <div class="item">2</div> 
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
В свойстве `grid-column` (или `grid-column-start` / `grid-column-end`) можно использовать комбинацию имени линии и `span`. Например, `grid-column: line-name / span 2;` означает 'начать от линии line-name и охватить 2 трека'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Сложная раскладка с областями

Создайте раскладку 'Святой Грааль' с помощью именованных областей. Должны быть области 'header' (вся первая строка), 'nav' (первая колонка второй строки), 'main' (вторая колонка второй строки), 'ads' (третья колонка второй строки) и 'footer' (вся третья строка).

CSS
.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: auto 1fr auto;
  input1: 
    "header header header"
    input2
    "footer footer footer";
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  height: 300px; 
  min-height: 300px;
}

.item { padding: 10px; text-align: center; border-radius: 5px; color: white; }
.header { grid-area: header; background-color: #F44336; }
.nav { grid-area: nav; background-color: #FF9800; }
.main { grid-area: main; background-color: #4CAF50; }
.ads { grid-area: ads; background-color: #2196F3; }
.footer { grid-area: footer; background-color: #607D8B; }
HTML
<div class="container">
  <div class="item header">Header</div>
  <div class="item nav">Nav</div>
  <div class="item main">Main Content</div>
  <div class="item ads">Ads</div>
  <div class="item footer">Footer</div>
</div>
Используйте свойство `grid-template-areas`. Определите три строки в значении свойства. Первая строка должна содержать 'header header header', вторая - 'nav main ads', третья - 'footer footer footer'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру