Карточка с миниатюрой: гибкая колонка для длинного текста
Композиция из миниатюры и описания встречается в каталогах и списках материалов. Длинное название не должно расширять карточку за пределы страницы.
Назначение
Композиция из миниатюры и описания встречается в каталогах и списках материалов. Длинное название не должно расширять карточку за пределы страницы.
Как это работает
Grid выделяет небольшую колонку под миниатюру и minmax(0,1fr) под текст. На узком окне элементы становятся последовательными. В примере миниатюра — декоративная цветная область, не внешний файл.
Пример
<style>.media-card{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;padding:1rem;border:1px solid #91aa9b}.media-card .thumb{aspect-ratio:1;background:linear-gradient(135deg,#2b7153,#ddedbf)}.media-card h3{margin:0;overflow-wrap:anywhere}.media-card p{margin:.5rem 0 0}@media(max-width:24rem){.media-card{grid-template-columns:1fr}.media-card .thumb{width:5rem}}</style>
<article class="media-card"><div class="thumb" aria-hidden="true"></div><div><h3>Учебная заметка о расположении элементов</h3><p>Описание сохраняет доступную ширину и переносится обычным потоком.</p></div></article>Что должно получиться
На широком окне миниатюра стоит рядом с описанием. На узком — над ним. Декоративная область исключена из дерева доступности, а весь смысл остаётся в заголовке и абзаце.
Граница применения и частая ошибка
Если заменить область содержательной фотографией, её нельзя автоматически считать декорацией: понадобится подходящий alt. Жёсткая высота карточки способна обрезать перевод или увеличенный текст. Проверяйте длинные слова и реальные данные.
Самостоятельная проверка
Замените заголовок длинной строкой без пробелов, затем обычным длинным предложением. Увеличьте текст и проверьте отсутствие горизонтальной прокрутки страницы. Сравните minmax(0,1fr) с простой колонкой 1fr.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.