Custom Cards with CSS

Custom Cards with CSS — a practical guide to CSS custom cards with clear examples you can reuse in real projects.

CSS Tutorial Series (78/109). Prefer one article? Read the complete CSS tutorial.

Short description

Use Grid/Flex inside cards for media + body alignment.

Card

.card {
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  gap: 0.75rem;
}