Card Grid in CSS

From the CSS Flexbox cheat sheet · Common Patterns · verified Jul 2026

Card Grid

Responsive card layout that automatically adjusts columns based on available space

css
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
}
html
<div class="cards">
  <div class="card">
    <div class="card-content">Content</div>
    <div class="card-footer">Footer</div>
  </div>
  <div class="card">
    <div class="card-content">Content</div>
    <div class="card-footer">Footer</div>
  </div>
</div>
🃏 Responsive card layout
💡 Auto-adjusting columns
⚡ No media queries needed

More CSS tasks

Back to the full CSS Flexbox cheat sheet