Answers for "css grid cards responsive"

responsive css grid

@supports (display: grid) {
  main { 
    max-width: 10000px;
    margin: 0;
  }
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
    grid-gap: 1rem;
  }
}

responsive card grid layout

<!-- CSS is mentioned as style -->
<style>
  .card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}
  .cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}
  @media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
  @media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
</style>
<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
</div>
<!-- Hope it helps -->