JSFiddle - React, Tailwind, and code Playground

HTML

<div class="alfie-blog-grid-medium">
<div class="blog-grid-wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

CSS

.alfie-blog-grid-medium .blog-grid-wrapper {
   display:grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-column-gap: 5px;
   grid-row-gap: 5px;
}  

.alfie-blog-grid-medium .blog-grid-wrapper div {
background:blue;
min-height:200px;
min-width:200px;
}