如何修复CSS与HTML实现图片网格时出现的布局异常问题

问题根因与修复方案 #

你遇到的网格错位、背景色透出问题由以下两个核心错误导致：

1. grid-template-columns 语法错误
   你代码中该属性值混入了编辑时的冗余内容，导致2列网格规则没有生效，布局出现不可预期的空白错位。
2. 图片默认基线间隙
   img标签属于行内替换元素，默认与文本基线对齐，底部会预留4px左右的空白，导致父元素的var(--clr-accent)背景色从间隙透出。
3. 可选优化：如果你的4张作品图尺寸不统一，也会导致单元格高度不一致出现不规则空白。

修复后的CSS代码 #

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

.portfolio{
    display: grid;
    /* 修正网格写法，如需自定义网格间距可添加gap属性，比如gap: 1.5rem; */
    grid-template-columns: repeat(2, 1fr);
    /* 新增以下两行让作品集容器在宽屏下居中、不撑满屏幕 */
    max-width: 1000px;
    margin-inline: auto;
    margin-top: 5em;
    margin-bottom: 5em;   
    padding-inline: 2rem;
}

.portfolio__item{
    background: var(--clr-accent);
    overflow: hidden;
}

.portfolio__img{
    /* 新增以下4行消除图片默认间隙，同时让图片撑满容器、比例适配 */
    display: block;
    width: 100%;
    height: 250px; /* 可根据你的设计需求调整统一高度 */
    object-fit: cover;
    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;
}

你HTML部分代码没有问题，无需修改，替换上述CSS代码即可解决当前布局问题。

内容的提问来源于stack exchange，提问作者MuneebShah