Практика: код и объяснение результата рядом
При обучении полезно сопоставить небольшой фрагмент кода с тем, что он делает. Две колонки должны превращаться в последовательное чтение на узком экране без потери подписей.
Назначение
При обучении полезно сопоставить небольшой фрагмент кода с тем, что он делает. Две колонки должны превращаться в последовательное чтение на узком экране без потери подписей.
Как это работает
Grid создаёт две колонки с minmax(0,1fr), чтобы длинный код не диктовал общую ширину. Каждая область имеет заголовок. В примере справа находится текстовое объяснение, а не автоматически выполняемый результат.
Пример
<style>.code-result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.code-result pre{overflow:auto;background:#eaf3ed;padding:1rem}.code-result p{line-height:1.6}@media(max-width:36rem){.code-result{grid-template-columns:1fr}}</style>
<div class="code-result"><section><h3>Код</h3><pre><code>.box {
padding: 1rem;
}</code></pre></section><section><h3>Что изменится</h3><p>Между содержимым блока и его границей появится внутренний отступ.</p></section></div>Что должно получиться
На широкой области код и объяснение стоят рядом, на узкой — друг под другом в порядке DOM. Прокрутка длинной строки ограничена блоком pre.
Граница применения и частая ошибка
Не называйте статическое пояснение результатом реально выполненного кода, если выполнения нет. Не применяйте CSS order для перестановки логики чтения. Для сложных примеров лучше дать отдельный полноценный документ и описать условия запуска.
Самостоятельная проверка
Добавьте длинную строку и несколько абзацев пояснения. Проверьте отсутствие горизонтального переполнения всей страницы. Отключите CSS и убедитесь, что подписи всё ещё позволяют понять связь двух областей.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.