时间戳

首页 > 解决方案 > 如何修复我的 CSS 和 HTML 中的图像网格

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

问题描述

我目前正在制作一个作品集来展示我过去的一些作品，我想在中心的 2 x 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>

标签： htmlcss

解决方案

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。

推荐阅读