grid-template-areas: именованная схема расположения блоков
Grid-template-areas описывает области сетки через короткие имена. Такая запись помогает читать общую схему макета и менять её на разных ширинах без перестановки HTML.
Назначение
Grid-template-areas описывает области сетки через короткие имена. Такая запись помогает читать общую схему макета и менять её на разных ширинах без перестановки HTML.
Как это работает
Каждая строка в кавычках задаёт ряд областей. Число ячеек в рядах должно совпадать; повторяющееся имя должно образовывать прямоугольник. Элемент связывается с областью свойством grid-area.
Пример
<style>.areas{display:grid;grid-template-columns:2fr 1fr;grid-template-areas:"title title" "text note";gap:1rem}.areas h2{grid-area:title}.areas p{grid-area:text}.areas aside{grid-area:note;background:#e5f3e9}@media(max-width:32rem){.areas{grid-template-columns:1fr;grid-template-areas:"title" "text" "note"}}</style>
<section class="areas"><h2>План урока</h2><p>Основное объяснение.</p><aside>Дополнительная заметка.</aside></section>Что должно получиться
На широкой области заголовок занимает две колонки, заметка стоит рядом с текстом. На узкой области блоки выстраиваются в один столбец в том же смысловом порядке.
Граница применения и частая ошибка
Несогласованная или непрямоугольная схема делает объявление недействительным. Визуальный перенос областей не исправляет неверный порядок чтения в исходнике. Точку можно использовать для пустой ячейки, но она не создаёт HTML-элемент.
Самостоятельная проверка
Добавьте нижнюю область с итогом урока на всю ширину. Проверьте схему в инспекторе и клавиатурный порядок ссылок. Намеренно создайте непрямоугольную область в копии и найдите отклонённое правило.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.