Как сделать карточки css?

Карточка это блок с padding, border-radius и box-shadow, несколько карточек удобно раскладывать через grid с auto-fit и minmax для адаптивной сетки без media query.

1. Заводишь блок под карточку, div с классом card, внутри картинка, заголовок, текст, можно кнопка.
2. Даёшь ему padding, чтобы контент не прилипал к краям, обычно 16-24px достаточно.
3. border-radius для скруглённых углов, 8-16px смотрится современно, больше уже почти пилюля.
4. box-shadow вместо жёсткой рамки, лёгкая тень читается мягче чем border, но использовать вместе тоже можно.
5. Если карточек несколько и они должны стоять в ряд, оборачиваешь их в контейнер с display: grid и grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)), тогда сетка сама решит сколько карточек влезет в ряд и подстроится под ширину экрана без media query.
6. Картинку внутри карточки делай object-fit: cover, чтобы она не искажалась при разных пропорциях исходника.
7. При наведении добавь transition на transform или box-shadow, лёгкий подъём карточки на hover читается как интерактивность, но не переусердствуй, 2-4px сдвига достаточно.
8. Текст внутри карточки ограничивай по количеству строк через -webkit-line-clamp, если описания разной длины, иначе карточки в ряду будут прыгать по высоте и сетка станет неровной.
9. Не забывай про flex внутри самой карточки, если кнопка должна всегда быть внизу независимо от длины текста над ней, flex-direction: column и margin-top: auto на кнопке решают это без лишних расчётов.

карточки у меня прыгали по высоте пока не добавил ограничение строк на текст, до этого грешил на grid хотя дело было не в нём