Odtnhj

I'm trying to understand the nature of css grid, im somewhat new to it. I want to keep my grid items responsive and maintain the aspect ratio of the images. It seems that there is a weird gap on the bottom of the images.

I look at other questions that could be similar, still not sure.

here is what i have

https://codepen.io/eliowl/pen/EOgNQe

html

<section id="about" class="about">
 <h3 class="text-center">About</h3>
 <section class="grid">
 <div class="grid-item --width3 ">
 <img src="https://images.unsplash.com/photo-1541807084-5c52b6b3adef?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0c64fc542895cda41529f98ed3808572&auto=format&fit=crop&w=634&q=80" alt="">
 </div>

 <div class="grid-item --width ">
 <img src="https://images.unsplash.com/photo-1541773477186-4133e93eb70e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da73715faa685433b42f4decb9f71a60&auto=format&fit=crop&w=634&q=80" alt="">
 </div>

 <div class="grid-item --width2 ">
 <img src="https://images.unsplash.com/photo-1541787975442-d5085a8ec678?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f6fc603cb3c4886ec55a1bff07ee7b53&auto=format&fit=crop&w=375&q=80" alt="">
 </div>

 <div class="grid-item ">
 <img src="https://images.unsplash.com/photo-1541780050666-f64773a3d779?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9ce82bea4ecf5b343e5317a683fd8226&auto=format&fit=crop&w=634&q=80" alt="">
 </div> 


 <div class="grid-item ">
 <img src="https://images.unsplash.com/photo-1541766029309-8d7fa5bb773b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f3d1bf633d2a601dd04a716acfce40be&auto=format&fit=crop&w=500&q=60" alt="">
 </div> 

 </section>
</section>

scss

.grid
 display: grid;
 background-color: #fafafa;
 max-width: 1300px;
 clear: both;
 margin: 0 auto;
 grid-template-columns:1fr 1fr 1fr 1fr;
 grid-auto-flow: dense;

 grid-auto-rows: 100%;


.grid:after 
 content: '';
 display: block;
 clear: both;


.grid-item 
 display: flex;
 position: relative;
 overflow: hidden;
align-items:flex-start;
 grid-column: auto / span 2;
 grid-row: auto / span 4;



 img 
 width: 100%;
 



.--width
 grid-row: 2;



.--width2
 grid-row: auto / span 4;