index.html

<style>
  
  .container {
    border: 1px dashed #000;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
  }
  
  .box {
  --size: calc(100% / var(--col, 4));
  --gutter: 10px;
  width: calc(var(--size, 25%) - (var(--gutter) * 2));
  background: tomato;
  margin: var(--gutter);
  height: 200px;
}

@media(max-width: 400px) {
  .box {
    --col: 2;
    --gutter: 6px;
  }
}

@media(max-width: 200px) {
  .box {
    --col: 1;
    --gutter: 2px;
  }
}

</style>

<section class="container" id="container">
  <article class="box">1</article>
  <article class="box">2</article>
  <article class="box">3</article>
  <article class="box">4</article>
</section>