Grid tile Design - html

Question

Hi I'm trying to replicate this pen:[1]: https://codepen.io/freeCodeCamp/full/zNBOYG
I've use the grid concept but I'm new to it so Grid Tile/item design is not accurate.
My code is as follows:-
/*Base */
html {
scroll-behavior: smooth;
}
*,
html {
margin: 0;
}
/* Typography*/
li {
font-family: sans-serif;
}
h1,
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 3rem;
}
h2 {
font-size: 1.8rem;
}
.welcome-section>p {
font-size: 1.5rem;
font-weight: 200;
}
/* layout */
nav {
text-align: right;
position: sticky;
top: 0;
margin: 0;
}
ul li {
list-style-type: none;
padding: 20px 30px;
height: 100%;
display: inline-block;
}
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.projects-gird {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
grid-gap: 2rem;
}
.project-tile {
margin-top: 2rem;
border: 1px solid black;
margin-bottom: 0;
}
.project-tile span {
display: none;
}
.project-tile p:hover span {
color: orange;
display: inline;
font-weight: 200;
}
/*Decoration*/
nav {
background-color: #BE3144;
}
li {
color: white;
}
a {
color: white;
text-decoration: none;
font-weight: bold;
}
ul li:hover {
background-color: #5A7384;
}
.welcome-section {
background-color: #000;
}
h1 {
color: white;
}
.welcome-section>p {
color: red;
font-style: italic;
}
.projects-section {
text-align: center;
padding: 4rem 2rem;
background-color: #8878c3;
}
.projects-section-header {
color: white;
border-bottom: 0.2rem solid white;
}
.project-tile p {
background-color: black;
margin-top: 0;
}
img {
margin: 0;
width: 100%;
}
<section id="projects" class="projects-section">
<h2 class="projects-section-header">These are some of my projects</h2>
<div class="projects-grid">
<div class="project-tile">
<a href="#welcome-section"><img src="https://i.postimg.cc/JnPffRyN/project-fiddle.png">
<p>
<span><</span> work1
<span>/></span>
</p>
</a>
</div>
<div class="project-tile">
<a href="#welcome-section"><img src="#">
<p>
<span><</span> work1
<span>/></span>
</p>
</a>
</div>
</div>
</section>
As you can see the result, there is a space between img and p elements and the tile design is also not accurate.Also if I want to fit two tiles in a row what should be the arguments to minmax()function .
please help me with this (Note: margin:0 has no effect)

Answer 1

The reason there's a margin between then img and the p tag is the the img tag is not floated, if you use the following code:
img {
margin: 0;
width: 100%;
float:left;
}
the margin should be gone.
hope this help

Answer 2

I know one way to make it work is to add this, your img was display: inline by default:
.project-tile img {
display: block;
}
/*Base */
html {
scroll-behavior: smooth;
}
*,
html {
margin: 0;
}
/* Typography*/
li {
font-family: sans-serif;
}
h1,
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 3rem;
}
h2 {
font-size: 1.8rem;
}
.welcome-section>p {
font-size: 1.5rem;
font-weight: 200;
}
/* layout */
nav {
text-align: right;
position: sticky;
top: 0;
margin: 0;
}
ul li {
list-style-type: none;
padding: 20px 30px;
height: 100%;
display: inline-block;
}
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.projects-gird {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
grid-gap: 2rem;
}
.project-tile {
margin-top: 2rem;
border: 1px solid black;
margin-bottom: 0;
}
.project-tile img {
display: block;
}
.project-tile span {
display: none;
}
.project-tile p:hover span {
color: orange;
display: inline;
font-weight: 200;
}
/*Decoration*/
nav {
background-color: #BE3144;
}
li {
color: white;
}
a {
color: white;
text-decoration: none;
font-weight: bold;
}
ul li:hover {
background-color: #5A7384;
}
.welcome-section {
background-color: #000;
}
h1 {
color: white;
}
.welcome-section>p {
color: red;
font-style: italic;
}
.projects-section {
text-align: center;
padding: 4rem 2rem;
background-color: #8878c3;
}
.projects-section-header {
color: white;
border-bottom: 0.2rem solid white;
}
.project-tile p {
background-color: black;
margin-top: 0;
}
img {
margin: 0;
width: 100%;
}
<section id="projects" class="projects-section">
<h2 class="projects-section-header">These are some of my projects</h2>
<div class="projects-grid">
<div class="project-tile">
<a href="#welcome-section"><img src="https://i.postimg.cc/JnPffRyN/project-fiddle.png">
<p>
<span><</span> work1
<span>/></span>
</p>
</a>
</div>
<div class="project-tile">
<a href="#welcome-section"><img src="#">
<p>
<span><</span> work1
<span>/></span>
</p>
</a>
</div>
</div>
</section>