Карточка характеристик: адаптивная сетка для dl
Список описаний подходит для пар «характеристика — значение». Адаптивная раскладка делает такую карточку компактной на широком экране и последовательной на узком.
Назначение
Список описаний подходит для пар «характеристика — значение». Адаптивная раскладка делает такую карточку компактной на широком экране и последовательной на узком.
Как это работает
Каждая пара dt и dd помещается в div внутри dl. В широком режиме контейнер пары становится двухколоночной сеткой. На узком экране название и значение следуют друг за другом в обычном потоке.
Пример
<style>.specs{margin:0}.specs>div{padding:.7rem 0;border-bottom:1px solid #bccbc3}.specs dt{font-weight:700}.specs dd{margin:0;overflow-wrap:anywhere}@media(min-width:36rem){.specs>div{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(0,2fr);gap:1rem}}</style>
<dl class="specs"><div><dt>Формат</dt><dd>HTML и CSS</dd></div><div><dt>Файл примера</dt><dd>responsive-learning-card.html</dd></div><div><dt>Среда</dt><dd>Браузер и текстовый редактор</dd></div></dl>Что должно получиться
Название и значение остаются рядом в исходном документе, независимо от ширины. Длинное имя файла может переноситься внутри выделенной колонки, а не расширять всю страницу.
Граница применения и частая ошибка
Не разделяйте все названия и все значения на два независимых списка: их связь станет неочевидной. Если данные сравниваются по нескольким колонкам и строкам, семантическая таблица может подходить лучше.
Самостоятельная проверка
Добавьте значение из нескольких предложений и пару без короткого ответа. Проверьте ширину 320 пикселей и увеличение текста: высота строки должна определяться содержимым, а не жёстким числом.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.