How to create a responsive grid of cards with equal height in CSS

Arif Billah Babu

          

  CSS



Image not found!!


Creating a responsive grid of cards with equal height in CSS can be achieved using Flexbox or CSS Grid. Here's an example using Flexbox:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    .card-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .card {
      width: calc(33.33% - 20px);
      margin-bottom: 20px;
      box-sizing: border-box;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
    }

    @media screen and (max-width: 768px) {
      .card {
        width: calc(50% - 20px);
      }
    }

    @media screen and (max-width: 480px) {
      .card {
        width: 100%;
      }
    }
  </style>
</head>
<body>

<div class="card-container">
  <div class="card">
    <h2>Card 1</h2>
    <p>Content goes here...</p>
  </div>

  <div class="card">
    <h2>Card 2</h2>
    <p>Content goes here...</p>
  </div>

  <div class="card">
    <h2>Card 3</h2>
    <p>Content goes here...</p>
  </div>

  <!-- Add more cards as needed -->
</div>

</body>
</html>

In this example:

  • .card-container is the flex container that holds the cards.
  • .card represents each individual card within the container.
  • The flex-wrap: wrap; property ensures that cards will wrap to the next line if there isn't enough space.
  • Media queries are used to adjust the card width based on the screen size, making it responsive.

You can customize the styles, widths, and other properties according to your design preferences. Additionally, you can also achieve a similar layout using CSS Grid if you prefer that approach.

Category List