CSS Responsive Card Layout with Media Queries (Code Snippet)

<div class="card-container">
  <div class="card"><h3>Card 1</h3><p>Some content for card 1.</p></div>
  <div class="card"><h3>Card 2</h3><p>Some content for card 2.</p></div>
  <div class="card"><h3>Card 3</h3><p>Some content for card 3.</p></div>
  <div class="card"><h3>Card 4</h3><p>Some content for card 4.</p></div>
</div>

* {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  box-sizing: border-box;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* Space between cards */
  padding: 1rem;
}
.card {
  background-color: #e9e9e9;
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  flex-basis: 100%; /* Default: 1 column for smallest screens */
  box-sizing: border-box;
  text-align: center;
}
.card h3 {
  font-size: 20px;
  font-weight: 500;
}
/* Small devices (tablets, 600px and up) */
@media (min-width: 600px) {
  .card {
    flex-basis: calc(50% - 0.5rem); /* 2 columns, accounting for gap */
  }
}

/* Medium devices (desktops, 900px and up) */
@media (min-width: 900px) {
  .card {
    flex-basis: calc(33.333% - 0.67rem); /* 3 columns */
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .card {
    flex-basis: calc(25% - 0.75rem); /* 4 columns */
  }
}

CSS Responsive Card Layout with Media Queries

Share Code Snippet