html { font-family: Arial, Helvetica, sans-serif;
font-size: 18px; 

}
body { padding: 1rem; }
  background-color: lightgrey;
  color: blue;
}

.card {
  background-color: red;
  color: red;
  border: 1px solid black;
  padding: 1rem;
  height: 9rem;
}


.cards {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

/* Screen larger than 200px? 2 column */
@media (min-width: 200px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 481px) and (max-width: 767px)
{
  .cards { grid-template-columns: repeat(3, 1fr); }
}


/* Screen larger than 800px? 3 column */
@media (min-width: 800px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* Screen larger than 1000px? 3 columns */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}



Resources