23. Именованные линии

CSS: Именованные линии

Именованные линии в CSS Grid Layout позволяют вам давать имена линиям сетки, что делает ваш код более читаемым и понятным, а также упрощает позиционирование элементов. Вместо того, чтобы полагаться на числовые индексы, вы можете использовать осмысленные имена.

Что такое именованные линии?

В CSS Grid Layout, сетка состоит из линий. Обычно мы обращаемся к этим линиям по их номеру (начиная с 1). Именованные линии позволяют присвоить этим линиям имена, что делает код более выразительным и облегчает понимание структуры сетки.

Как использовать именованные линии

Именованные линии объявляются при определении grid-template-columns и grid-template-rows. Вы можете дать одной линии несколько имен, заключив их в квадратные скобки.

.container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-2] 1fr [col-end];
  grid-template-rows: [row-start] 1fr [row-2] 1fr [row-end];
}

В этом примере мы назвали линии начала и конца столбцов col-start, col-2 и col-end, а линии начала и конца строк row-start, row-2 и row-end.

Теперь можно использовать эти имена для размещения элементов:

.item {
  grid-column-start: col-start;
  grid-column-end: col-2;
  grid-row-start: row-start;
  grid-row-end: row-2;
}

Практические примеры кода

Пример 1: Простая сетка с именованными линиями

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] auto [main-end];
  grid-template-rows: [header-start] 50px [header-end content-start] auto [content-end footer-start] 50px [footer-end];
  grid-gap: 10px;
  height: 400px;
}

.item {
  background-color: #ddd;
  padding: 10px;
  border: 1px solid #ccc;
}

.item-1 {
  grid-column-start: sidebar-start;
  grid-column-end: sidebar-end;
  grid-row-start: header-start;
  grid-row-end: footer-end;
}

.item-2 {
  grid-column-start: main-start;
  grid-column-end: main-end;
  grid-row-start: header-start;
  grid-row-end: content-end;
}

.item-3 {
  grid-column-start: main-start;
  grid-column-end: main-end;
  grid-row-start: footer-start;
  grid-row-end: footer-end;
}

Пример 2: Использование нескольких имен для одной линии

.container {
  display: grid;
  grid-template-columns: [col1 start] 1fr [col1 end col2 start] 1fr [col2 end];
  grid-template-rows: 1fr 1fr;
}

.item-1 {
  grid-column-start: col1 start;
  grid-column-end: col2 end;
  grid-row-start: 1;
  grid-row-end: 3;
}

Жизненный пример

Многие современные CSS фреймворки и библиотеки компонентов (например, Material UI, Bootstrap с использованием CSS Grid) используют именованные линии для создания гибких и легко настраиваемых макетов. Например, можно использовать именованные линии для создания сайдбаров, хедеров и футеров, которые легко адаптируются к разным размерам экрана. В крупных веб-приложениях, где структура макета может быть сложной, именованные линии значительно упрощают понимание и поддержку CSS кода.

Ключевые моменты

• Именованные линии делают код более читаемым и понятным.
• Они упрощают позиционирование элементов в сетке.
• Можно присваивать одной линии несколько имен.
• Именованные линии полезны в сложных макетах и при использовании CSS Grid фреймворков.
• Использование именованных линий помогает избежать “магических чисел” в CSS коде.

Интерактивный пример