Interview Question

How do you build responsive cards?

Use a fluid minmax Grid so cards wrap without device-specific breakpoints.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

Responsive cards can use a fluid Grid that creates as many usable columns as fit. • minmax() protects a readable minimum card width. • auto-fit or auto-fill repeats tracks according to available space. • Card content should remain in logical source order.

💡 Simple Example

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

⚡ Quick Revision

Use a fluid minmax Grid so cards wrap without device-specific breakpoints.

←

PreviousHow do you create a loading spinner?

NextHow do you create a CSS grid layout?

→