0Pricing
CSS Academy · Урок

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

Задавайте имена линиям и областям сетки для более понятного и удобного сопровождения размещения элементов.

«Именованные линии и области сетки» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Именование линий сетки

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

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

Размещение элементов с именованными линиями

Используйте именованные линии в grid-column и grid-row для понятного размещения:

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

Имена линий с суффиксами -start и -end

Когда именованные области определены с помощью grid-template-areas, CSS автоматически создаёт именованные линии с суффиксами -start и -end, на которые можно ссылаться.

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

Повторяющиеся именованные линии

При использовании repeat() можно включать имена в повторяющийся шаблон. Для различения линии получают нумерованные суффиксы.

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

Охват именованных линий

Используйте именованные линии вместе с span, чтобы охватить определённое количество именованных треков:

  <div class="grid">
    <div class="header">Header spans 3</div>
    <div>A</div><div>B</div><div>C</div>
  </div>

Повторение именованных областей

Именованные области (через grid-template-areas) — наиболее понятный способ размещать элементы:

  <div class="page">
    <header>Header</header>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
    <div class="footer">Footer</div>
  </div>

Именованные линии для сложных макетов

Именованные линии особенно полезны в сложных редакционных макетах с несколькими элементами, охватывающими несколько треков:

  <div class="magazine">
    <div class="full-bleed">Full bleed banner</div>
    <div class="article">Article content</div>
  </div>

Сочетание имён и номеров

Именованные линии и номера линий можно свободно сочетать в одной сетке:

  <div class="layout"><div class="item">Item</div></div>

Несколько имён на одной линии

Одна линия может иметь несколько имён — это полезно, когда линия одновременно служит концом одной области и началом другой:

  <div class="grid">
    <div>Sidebar</div>
    <div>Content</div>
  </div>

Неявные именованные линии из областей

Если определить именованную область с названием «основная», линии main-start (столбца и строки) и main-end будут созданы автоматически, что позволит использовать их для перекрывающихся элементов.

Отладка именованных линий в DevTools

DevTools Chrome и Firefox могут отображать именованные линии сетки в виде подписей на наложении. Включите подписи линий на панели раскладки, чтобы проверить правильность имён.

Быстрая проверка

Какие имена линий автоматически создаются при определении именованной области сетки «боковая панель» в grid-template-areas?

Повторение

Называйте линии сетки в квадратных скобках внутри определений треков, чтобы размещение было понятнее. Именованные области автоматически создают имена линий с суффиксами -start и -end. Одна линия может иметь несколько имён. Именованные линии можно свободно сочетать с span и номерами. Используйте DevTools для визуализации именованных линий в виде наложения.

Часто задаваемые вопросы

Урок «Именованные линии и области сетки» бесплатный?

Да — полный текст урока «Именованные линии и области сетки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Именованные линии и области сетки»?

Задавайте имена линиям и областям сетки для более понятного и удобного сопровождения размещения элементов. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Именованные линии и области сетки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Именованные линии и области сетки
  2. Auto-fit и auto-fill с minmax
  3. Неявная сетка и Grid-Auto-Flow
  4. Subgrid для выравнивания вложенного содержимого
← Назад к CSS Academy