CSS to Display Post Grid in One Column Like the Image I added

Here is an example of the grid I need : 1: https://i.stack.imgur.com/fyOuz.png

i want to Display Post Grid in One Column in my mobile theme instead of the 2x2 grid. Every of the box will be aligned in one column. full width but reduction in height.

here is another example View on mobile phone

Here is my HTML & CSS

  *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
    html{
      background-color:#eee;
    }
    .container{
      margin: 20px auto;
      width:400px;
      height:400px;
      background-color:#fff;
      display:grid;
      grid-template-columns: 200px 200px;
      grid-row: auto auto;
      grid-column-gap: 20px;
      grid-row-gap: 20px;
      .box{
        background-color:#333;
        padding:20px;
        border-radius:10px;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:40px;
        font-family:sans-serif;
      }

    }

<div class="container"><div class="box">A</div><div class="box">B</div><div class="box">C</div><div class="box">D</div></div>