<style>
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

.container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.item {
  width: 100px;
  min-height: 100px;
  background: lightblue;
  border: solid 1px;
  border-radius: 6px;
}    
</style>






<main>
  <h2>Responsive Grid with No Media Queries</h2>
  
  <p>Resize the window to allow the grid items to break onto new lines. Notice the grid is fully responsive, with no need for any media queries.</p>

  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

</main>