responsive grid

by jshacker

HTML

<div class="grid-container">
  <div class="grid-item">item #1</div>
  <div class="grid-item">item #2</div>
  <div class="grid-item">item #3</div>
</div>

CSS

.grid-item {
  margin: 1rem;
  padding: 1rem;
  background-color: #eee;
  min-height: 200px;
  width: calc(100% - 4rem);
}

/** If breaking layout via max-width, order should be largest -> smallest */

.grid-container {
  display: grid;
  grid: auto-flow / 1fr 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 800px) {
  .grid-container {
    display: grid;
    grid: auto-flow/ 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .grid-container {
    display: grid;
    grid: auto-flow/ 1fr;
  }
}