CSS网格2行之间的间隙，没有间隙或填充等

Question

我有两行网格布局，我的问题是第一行和第二行之间没有间隙，没有填充，间隙和边距。

我以为问题是包装img的标签，但是如果删除它们，它不会改变任何内容。

当我使用检查器检查间隙时，只有环绕着img的$folder包裹着，但是即使我删除了它，也存在这个间隙。

<a>

*{
  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 {

}