Адаптивные карточки с одинаковым расположением ссылок
Создаём каталог с переменным количеством колонок и аккуратным выравниванием нижних ссылок.
Задача и ограничения
У карточек разные заголовки и длина описания. Нужно сохранять читаемость, а ссылки на подробности расположить внизу каждой карточки. Жёсткое ограничение высоты обрежет длинный текст и плохо переживёт масштабирование.
Пошаговое решение
Внешнюю сетку сделайте через Grid с auto-fit и minmax. Минимум ограничьте шириной контейнера, чтобы фиксированная минимальная колонка не создала переполнение на очень узком экране.
Саму карточку превратите в вертикальный flex-контейнер. Ссылке задайте margin-top: auto, чтобы она занимала нижнюю позицию при наличии свободного пространства. Не делайте несколько вложенных кликабельных областей внутри одной большой ссылки.
Код компонента
<style>
.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; padding: 20px; border: 1px solid #b9d3c5; border-radius: 10px; }
.card a { margin-top: auto; color: #11694e; }
</style>
<div class="catalog"><article class="card"><h2>HTML</h2><p>Структура документа.</p><a href="#html">Подробнее об HTML</a></article><article class="card"><h2>CSS</h2><p>Оформление, адаптивность, размеры и расположение элементов на странице.</p><a href="#css">Подробнее о CSS</a></article></div>
<p id="html">HTML отвечает за смысл.</p><p id="css">CSS отвечает за оформление.</p>Что может пойти не так
Как проверить результат
- Добавьте третью и четвёртую карточки.
- Сделайте один заголовок длиннее вдвое.
- Проверьте перенос колонок и доступность ссылок клавиатурой.
Разберите также: колонки Grid, автоматические отступы.