how can i wrap grid making it responsive? - css

Question

I've been trying to do the last project of the FCC certificate, my problem is the mid section with the grid part, i managed to do something by trial and error, something at the end did come out, the problem is now i've been following other posts about using minmax, auto-fill and auto-fit after the repeat tag but it doesnt seem to work for me, it ruins the images blocks and they go wild if i touch something.
this is the whole code
https://jsfiddle.net/8k7ne9so/9/
.works {
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(320px, 1fr));
grid-column-gap: 18px;
grid-row-gap: 24px;
grid-area: auto;
}
.projects1 {
grid-area: 2 / 2 / 3 / 3;
}
.projects2 {
grid-area: 2 / 3 / 3 / 4;
}
.projects3 {
grid-area: 2 / 4 / 3 / 5;
}
.projects4 {
grid-area: 3 / 2 / 4 / 3;
}
.projects5 {
grid-area: 3 / 3 / 4 / 4;
}
.projects6 {
grid-area: 3 / 4 / 4 / 5;
}
<section>
<div class="presentation" id="presentation">
<h1>Hi, I'm Marwan</h1>
<p>Junior Web Developer</p>
</div>
</section>
<!-- lavori -->
<section>
<div id="works">
<h2 class="text">These are all my works so far</h2>
<div class="works">
<a id="projects" class="projects1" href="#">
<img class="images" src="http://placekitten.com/200/300" alt="">
<p class="pj-title"><span class="code"><</span> prova <span class="code">/></span></p>
</a>
<a id="projects" class="projects2" href="#">
<img class="images" src="http://placekitten.com/200/300" alt="">
<p class="pj-title"><span class="code"><</span> prova <span class="code">/></span></p>
</a>
<a id="projects" class="projects3" href="#">
<img class="images" src="http://placekitten.com/200/300" alt="">
<p class="pj-title"><span class="code"><</span> prova <span class="code">/></span></p>
</a>
<a id="projects" class="projects4" href="#">
<img class="images" src="http://placekitten.com/200/300" alt="">
<p class="pj-title"><span class="code"><</span> prova <span class="code">/></span></p>
</a>
<a id="projects" class="projects5" href="#">
<img class="images" src="http://placekitten.com/200/300" alt="">
<p class="pj-title"><span class="code"><</span> prova <span class="code">/></span></p>
</a>
<a id="projects" class="projects6" href="#">
<img class="images" src="http://placekitten.com/200/300" alt="">
<p class="pj-title"><span class="code"><</span> prova <span class="code">/></span></p>
</a>
</div>
</div>
</section>
as I said I'm trying everything but I can't manage to make them wrap and center do the center page