CSS Academy · Урок

Области шаблона сетки

Именуйте области сетки с помощью grid-template-areas для создания понятных семантических макетов.

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

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

grid-template-areas позволяет называть области сетки с помощью ASCII-графики. Это делает макеты понятными и удобными для сопровождения.

Определение областей шаблона

Каждая строка в кавычках представляет одну строку сетки. Ячейки с одинаковым именем образуют прямоугольную область. Используйте . для пустых ячеек.

<div class="page" style="min-height:240px;">
  <header style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <aside style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</aside>
  <main style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
  <footer style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>

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

Назначайте элементам сетки именованные области с помощью свойства grid-area и имени области без кавычек:

<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'header header' 'sidebar main' 'footer footer';min-height:220px;gap:4px;">
  <header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <div class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
  <main style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
  <footer style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>

Правила для областей шаблона

Именованные области должны быть прямоугольными. Каждая ячейка может принадлежать только одной области. Имя области не может встречаться в разрозненных ячейках — это было бы недопустимо.

Пустые ячейки с помощью .

Используйте одну или несколько точек, чтобы обозначить пустые ячейки в grid-template-areas:

<div class="layout" style="display:grid;min-height:200px;">
  <div style="grid-area:logo;background:#4f8cff22;border:1px solid #4f8cff;">Logo</div>
  <div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
  <div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
  <div style="grid-area:sidebar;background:#b57bff22;border:1px solid #b57bff;">Sidebar</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>

Адаптивные области с медиазапросами

Переопределяйте grid-template-areas в медиазапросах, чтобы полностью изменить структуру макета:

<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Narrow (default) preview below. Widen your browser to ≥768px to see the media query apply the two-column layout live.</p>
<div class="page" style="min-height:200px;margin-bottom:16px;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Preview of the ≥768px layout (static reference — not driven by the media query):</p>
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-areas:'header header' 'sidebar main' 'footer footer';gap:4px;min-height:160px;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
  <div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>

Сгенерированные именованные линии

При именовании области CSS автоматически создаёт именованные линии сетки: area-start и area-end для строк и столбцов.

<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'aside main' 'aside main';gap:0;min-height:160px;">
  <div style="grid-area:aside;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Aside</div>
  <div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content</div>
  <div class="overlay" style="grid-row:1/3;background:rgba(255,99,71,0.3);border:2px dashed tomato;padding:4px;">Overlay via named lines main-start / main-end</div>
</div>

Сочетание областей и номеров линий

Именованные области и явные номера линий могут сосуществовать в одной сетке. Элементы можно размещать по имени, линии или с помощью span.

Процесс визуального проектирования сетки

Распространённый процесс таков: сначала набросайте макет в виде областей шаблона, а затем задайте размеры столбцов и строк. Это отделяет структуру от вопросов, связанных с размерами.

<div class="dashboard" style="display:grid;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;">Header</div>
  <div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
  <div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
  <div style="grid-area:ads;background:#b57bff22;border:1px solid #b57bff;">Ads</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>

Области шаблона и доступность

Визуальный порядок элементов в сетке может отличаться от порядка в исходном коде DOM. Средства чтения с экрана следуют порядку DOM, а не визуальному размещению. Убедитесь, что порядок элементов в DOM логичен, даже если элементы визуально переставлены с помощью размещения в сетке.

Сокращённая запись grid-template

Объединяйте grid-template-areas, grid-template-columns и grid-template-rows в одном объявлении grid-template.

<div class="page" style="display:grid;min-height:200px;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
  <div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>

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

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

Итоги

grid-template-areas использует ASCII-графику для именования областей макета. Элементы размещаются с помощью grid-area: name. Области должны быть прямоугольными, а для пустых ячеек используется .. Переопределяйте области в медиазапросах, чтобы создавать полностью адаптивные макеты с чистым и понятным CSS.

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

Урок «Области шаблона сетки» бесплатный?

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

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

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

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

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

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

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

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

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

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

← Назад к CSS Academy