<div class="grids">
  <div class="grid">1</div>
  <div class="grid">2</div>
  <div class="grid">3</div>
  <div class="grid">4</div>
  <div class="grid">5</div>
  <div class="grid">6</div>
  <div class="grid">7</div>
  <div class="grid">8</div>
  <div class="grid">9</div>
</div>
html { 
font-size: 22px; 
}
body {
 padding: 1rem;
 }

.grid {
  background-color: blue;
  color: white;
  padding: 1rem;
  height: 4rem;
  font-size:50px;
}

.grids {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 0.5rem;
}

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.