Урок 16 · CSS

Фон, рамка и расстояние у карточки

Карточка из HTML становится интерфейсом, когда у неё есть поверхность, воздух и ровный сосед.

Почему это следующий шаг

Кнопки уже нажимаются. Рядом с ними обычно стоят карточки курсов или товаров.

Как сделать

Общий класс .card задаёт фон, рамку, радиус и padding. Расстояние между карточками лучше отдаёт родителю через gap, а не нижней границе каждой карточки. Тень — по желанию и слабая. Заголовок внутри карточки не должен прилипать к рамке. На узком экране карточка занимает 100% ширины родителя.

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card { padding: 1rem; border: 1px solid #e4ddd2; border-radius: 12px; background: #fff; }

Что проверить

• Три карточки держат одинаковый внутренний отступ.
• Между ними один зазор, а не двойной.
• На телефоне они встают столбиком без горизонтальной прокрутки.