如何修复我的CSS和HTML中的图像网格

Question

我目前正在制作一个作品集来展示我过去的一些作品，我想在中心的2乘2网格中展示它。当这样做时，它会创建几个空间，并且在这些空间之间还具有图像的背景色。以下是我的HTML和CSS部分的代码与该部分有关。我对这些语言还很陌生，我认为通过创建这些语言来学习它们是一个很好的方法。请查看图片链接以进一步了解我的问题。

以下是CSS和HTML部分：

.my-work {
background-color: var(--clr-dark);
color: var(--clr-light);
text-align: center;

}
.portfolio{
display: grid;
grid-template-columns: repeat(2[enter image description here][1], 1fr);
margin-top: 5em;
margin-bottom: 5em;   

}
.portfolio__item{
background: var(--clr-accent);
overflow: hidden;
}
.portfolio__img{
transition: transform 750ms cubic-bezier(.5, 0, 0.5, 1),
opacity 250ms linear;
}
.portfolio__item:focus{
position: relative;
z-index: 2;
}
.portfolio__img:hover,
.portfolio__item:focus .portfolio__img{
transform: scale(1.2);
opacity: 0.85;
}

<!--My Work-->
<section class="my-work" id="work">
<h2 class="section__title">Projects</h2>

<div class = "portfolio" >
<a href = "a" class = "portfolio__item">
<img src = "img/port1.png" class="portfolio__img" >
</a>
<a href = "a" class = "portfolio__item">
<img src = "img/port2.jpg" class="portfolio__img" >
</a>
<a href = "a" class = "portfolio__item">
<img src = "img/port3.jpg" class="portfolio__img" >
</a>
<a href = "a" class = "portfolio__item">
<img src = "img/port4.jpg" class="portfolio__img" >
</a>
</div>

</section>

Answer 1

https://codepen.io/MattWindle/pen/perZRG

也许这只电笔可以帮你。重要的代码部分是

display:grid;

这有助于浏览器了解你在做什么：

grid-template-columns: 200px 200px;
grid-column-gap: 20px;
grid-row-gap: 20px;

这指定了列和五个列之间的关系——您对如何实现有一个想法。

PD。你可以在codepen.io上搜索很多例子来了解更多的css/html/js。