Карточки разной длины с действиями внизу
Кнопки карточек можно выровнять по нижнему краю строки, не задавая одинаковую фиксированную высоту текстам.
Назначение
Кнопки карточек можно выровнять по нижнему краю строки, не задавая одинаковую фиксированную высоту текстам.
Как это работает
Внешняя сетка растягивает карточки одной строки, а внутри используется flex-колонка. margin-top:auto у области действия поглощает оставшееся место под текстом. Разные строки сетки при этом могут иметь разную высоту.
Пример
<style>.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.card{display:flex;flex-direction:column;padding:16px;border:1px solid}.card button{margin-top:auto;align-self:flex-start}</style>
<div class="cards"><article class="card"><h2>HTML</h2><p>Разметка.</p><button>Изучить HTML</button></article><article class="card"><h2>CSS</h2><p>Оформление, адаптивность и раскладка страницы с подробными примерами.</p><button>Изучить CSS</button></article></div>Что должно получиться
В одной строке кнопки опираются на нижнюю область карточек. Пример показывает расположение; учебные кнопки не выполняют переход или отправку данных.
Граница применения и частая ошибка
Не обрезайте описание до заранее выбранного количества пикселей ради ровных кнопок. Проверяйте длинные заголовки, масштаб и содержимое на другом языке.
Самостоятельная проверка
Добавьте третью карточку с длинным описанием. Затем уменьшите ширину до одной колонки и проверьте, что кнопки идут после текста без искусственно огромных пустот.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.