I have a grid layout with two rows, my problem is that there's a gap between the first and secondrow and there's no padding, gap, margin.
I thought the problem is the a tag which wraps the img but if I remove them it doesn't change anything.
When I use the inspector to inspect the gap there's only the wrapped <a> wrapped arround the img but even I remove this there's this gap.
*{
padding: 0;
margin: 0;
}
body{
height: 100%;
width: 100%;
margin:0;
}
.count{
font-size: 40px;
}
.loaded{
font-size: 40px;
}
.links{
width: 100%;
background-color: grey;
min-height: 100px;
box-sizing: border-box;
}
.container-loading{
margin: 0 auto;
min-width:400px;
background-color: grey;
border:1px solid black;
display: grid;
grid-template-columns: repeat( auto-fill, minmax(200px, 1fr) );
}
.grid{
display: grid;
grid-template-columns: repeat( auto-fill, minmax(200px, 1fr) );
grid-template-rows: 1fr 40px;
grid-template-areas:
"userimg"
"username";
}
.user-name{
grid-area: username;
text-align: center;
background-color: blue;
color:white;
}
.user-img{
grid-area: userimg;
}
.usrimg {
}
<div class="container-loading">
<div class="grid">
<div class="user-name">
Username
</div>
<div class="user-image">
<a href="https://www..com/#/profile">
<img class="usrimg" src="https://www.core-studio.de/212img.png">
</a>
</div>
</div>
</div>
