Практика: учебная панель с именованными областями Grid
Небольшая панель с планом урока и заметками помогает отработать именованные области на реальном составе блоков. Важная задача — сохранить логичный порядок чтения при смене числа колонок.
Назначение
Небольшая панель с планом урока и заметками помогает отработать именованные области на реальном составе блоков. Важная задача — сохранить логичный порядок чтения при смене числа колонок.
Как это работает
Сначала разместите в HTML заголовок, основной план, заметку и итог. На широкой области выделите заметке отдельную колонку, а на узкой соберите всё в один столбец. Размеры колонок ограничьте через minmax, чтобы длинный текст не диктовал ширину.
Пример
<style>.lesson-panel{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-areas:"heading heading" "plan note" "total total";gap:1rem;overflow-wrap:anywhere}.lesson-panel h2{grid-area:heading}.plan{grid-area:plan}.note{grid-area:note;background:#e5f3e9;padding:1rem}.total{grid-area:total}@media(max-width:34rem){.lesson-panel{grid-template-columns:1fr;grid-template-areas:"heading" "plan" "note" "total"}}</style>
<section class="lesson-panel"><h2>Подготовка страницы</h2><ol class="plan"><li>Создать разметку</li><li>Проверить стили</li></ol><aside class="note">Сохраните исходный файл перед изменением.</aside><p class="total">Итог: готовый учебный документ.</p></section>Что должно получиться
План и заметка стоят рядом только при достаточной ширине. Итог занимает всю строку. В линейном чтении объяснение предшествует заметке, а итог остаётся последним.
Граница применения и частая ошибка
Не переносите итог визуально в начало, оставляя его последним в DOM, если в нём появляются интерактивные действия. Breakpoint здесь учебный: в рабочем проекте его выбирают по поведению содержимого, а не по названию устройства.
Самостоятельная проверка
Добавьте длинный заголовок и увеличьте шрифт. Включите Grid overlay, проверьте именованные области и отсутствие горизонтальной прокрутки. Затем отключите стили и оцените понятность последовательности.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.