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

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

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

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

Список тем

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

id: 37280_css-grid-named-lines-1

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

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

id: 37280_css-grid-named-lines-2

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

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

id: 37280_css-grid-named-areas-1

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

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

id: 37280_css-grid-placement-col-lines-1

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

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

id: 37280_css-grid-placement-row-lines-1

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

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

id: 37280_css-grid-placement-area-1

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

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

id: 37280_css-grid-named-areas-2

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

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

id: 37280_css-grid-placement-span-cols-lines

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

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

id: 37280_css-grid-placement-span-rows-lines

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

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

id: 37280_css-grid-implicit-area-lines

Грид-контейнер использует `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

id: 37280_css-grid-named-lines-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 трека'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37280_css-grid-complex-areas

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