CSS Responsive Card Layout with Media Queries

Create a responsive card layout that adjusts the number of columns based on screen size using CSS Flexbox and Media Queries. Essential for modern web design.

#css

#responsive design

#media queries

#card layout

#flexbox

#mobile-first

/HTML *CSS ()JS Output Live Updates

* {
  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 */
  }
}