template-grig-responsive.html

<style>
      .boxs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
      }

      #box-1 {
        background: red;
      }
      #box-2 {
        background: green;
      }
      #box-3 {
        background: grey;
      }
      #box-4 {
        background: #000;
      }
    </style>
    <div class="boxs">
      <div id="box-1" class="box">Box 1</div>
      <div id="box-2" class="box">Box 2</div>
      <div id="box-3" class="box">Box 3</div>
      <div id="box-4" class="box">Box 4</div>

    </div>