.wrapper{
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
  gap:1rem;
  margin-top:0rem;
  max-height:400px;
}
.wrapper p h2 {  margin:0px;}
.wrapper img {
  max-width:100%;
  display:block;
}
.box{
   border:1px solid #ccc;
  border-radius: 6px;
  padding:1rem;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
}

<div class="wrapper">
  <div class="box">
    <img src="https://picsum.photos/600/400?random=1" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=4" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=3" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=2" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
</div>