CSS Grid布局顶部左侧出现额外间隙且gap属性无效问题求助

1. 消除图片左上角的额外间隙 #

浏览器默认会给body和figure元素添加margin，这就是你看到顶部、左侧间隙的来源，直接重置这些默认样式即可：

/* 重置body默认margin，消除容器与页面边缘的间隙 */
body {
  margin: 0;
}

/* 重置figure默认margin，消除图片外层容器的间隙 */
.gallery__item {
  margin: 0;
}

2. 修复gap属性不生效的问题 #

gap属性的作用是设置网格项之间的间距，你当前的网格容器里只有一个网格项，没有其他项和它相邻，所以小数值的gap自然看不到效果。只有当你添加更多网格项到网格布局中时，15px这类小gap才会显示出项与项之间的间隔。

如果你的需求是让网格项和容器边缘保持间距，不要用gap，给.gallery容器加padding才是正确的做法：

.gallery{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    gap: 15px; /* 多个网格项时生效 */
    padding: 15px; /* 给容器加内边距，实现项与容器边缘的间距 */
}

完整修改后的CSS代码 #

body {
  margin: 0;
}

.gallery{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    gap: 15px;
    padding: 15px; /* 可选，根据需要添加 */
}

.gallery__item {
  margin: 0;
}

.gallery__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__item--1{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 6;
}

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