Карточка характеристик на dl
Список описаний подходит для характеристик объекта, когда каждая подпись связана со своим значением.
Назначение
Список описаний подходит для характеристик объекта, когда каждая подпись связана со своим значением.
Как это работает
Пары dt и dd сохраняют смысл независимо от сетки. Grid может разместить подписи и значения в двух колонках, а на узком экране вернуть одну колонку без перестановки DOM.
Пример
<style>dl{display:grid;grid-template-columns:minmax(7rem,1fr) 2fr;gap:10px}dt{font-weight:700}dd{margin:0;overflow-wrap:anywhere}@media(max-width:420px){dl{grid-template-columns:1fr}dd{margin-bottom:12px}}</style>
<dl><dt>Формат</dt><dd>Учебный справочник</dd><dt>Темы</dt><dd>HTML, CSS и JavaScript</dd><dt>Доступ</dt><dd>Без регистрации</dd></dl>Что должно получиться
На широком экране пары выстроены в колонки, на узком — последовательно. Значения не теряют связь с терминами после изменения оформления.
Граница применения и частая ошибка
Не создавайте таблицу только ради двух колонок, если данные являются перечнем характеристик без общей матрицы. Но и не заменяйте настоящую сравнительную таблицу отдельными несвязанными списками.
Самостоятельная проверка
Добавьте длинное значение и ещё одну характеристику. Уменьшите ширину до одной колонки и проверьте, что каждая подпись остаётся рядом со своим описанием.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.