<main>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>

    <div class="card">
      This is a card
    </div>


  </main>
/* Grid will take card of a responsive gallery without the need of width mediau qeries for breakpoints */

main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
  padding: 2rem;
}

/* Card styles */
.card {
  border: 4px solid black;
  padding: 1rem;
  min-height: 6rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.