Why does CSS Grid layout add extra gaps between cells?
尽管边距和填充为零，但无法弄清楚为什么CSS网格布局会在垂直单元格周围的内容上添加不必要的额外空间：
.grid {
display: grid;
grid-template-columns: 13fr 11fr 4fr 20fr;
grid-auto-rows: 12fr;
grid-gap: 4px;
align-items: center;
}
.grid figure {
outline: 1px solid red;
margin: 0;
padding: 0;
}
.grid figure img {
margin: 0;
padding: 0;
width: 100%;
display: block;
}
.grid .gi13x12 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 13;
}
.grid .gi11x6.one {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 7;
}
.grid .gi11x6.two {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 7;
grid-row-end: 13;
}
.grid .gi4x4.one {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 5;
}
.grid .gi4x4.two {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 9;
}
.grid .gi4x4.three {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 9;
grid-row-end: 13;
}
.grid .gi20x12 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 13;
}
<div class="grid">
<figure class="gi13x12">
<img itemprop="image" src="http://placehold.it/130x123">
</figure>
<figure class="gi11x6 one">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi11x6 two">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi4x4 one">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 two">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 three">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi20x12">
<img itemprop="image" src="http://placehold.it/200x120">
</figure>
</div>
问题答案：
垂直间隙是由图像未填充网格项目中的垂直空间引起的。
align-items: center容器上的问题变得更糟，该容器删除了align-items: stretch默认设置。
本质上，网格项目之间没有间隙。它们形成干净整齐的网格。但是，因为图像小于包含它们的项目，然后这些项目垂直居中居中align-items，所以存在很多空隙。
这是更详细的说明，使用Firefox的网格覆盖工具进行说明：
（1）当grid-row-gap和grid-column-gap为0 时，这是您的网格：
在此处输入图片说明
红线代表网格项。图像是网格项目的内容。虚线表示网格线。
（2）是10px 时grid-column-gap没有问题：
在此处输入图片说明
（3）但是看看10px 时grid-row-gap会发生什么：
在此处输入图片说明
网格项（红线）整齐地包裹了它们的内容（图像）。这仅是因为容器设置为align-items: center。
（4）现在，删除align-items: center（恢复默认stretch值）并保留grid-column-gap: 10px和grid-row-gap: 10px：
在此处输入图片说明
如您所见，网格项目（具有红色边框和黄色背景）现在展开全高。但是小于项目的图像会留下空白。
（5）这是上面（4）中没有指示器的网格。
align-items: stretch
在此处输入图片说明
align-items: center （与问题中的布局相同）
在此处输入图片说明
（6）因此关键是使图像充满网格项目。
一种简单的解决方案是display: flex将网格项应用于网格，网格项将自动分配align-items: stretch给图像，从而使图像占据全部高度。
然后，根据您希望图像的外观，可以object-fit用来管理图像的外观。
将此添加到您的代码：
.grid figure {
display: flex;
}
.grid figure img {
object-fit: cover; /* also try `contain` and `fill` */
}
通过上面的调整，网格呈现如下：
.grid {
display: grid;
grid-template-columns: 13fr 11fr 4fr 20fr;
grid-auto-rows: repeat(12, 1fr);
grid-gap: 10px;
/* align-items: center; */
}
.grid figure {
border: 2px solid red;
margin: 0;
padding: 0;
background-color: yellow;
display: flex; /* new */
}
.grid figure img {
margin: 0;
padding: 0;
width: 100%;
display: block;
object-fit: cover; /* new */
}
.grid .gi13x12 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 13;
}
.grid .gi11x6.one {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 7;
}
.grid .gi11x6.two {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 7;
grid-row-end: 13;
}
.grid .gi4x4.one {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 5;
}
.grid .gi4x4.two {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 9;
}
.grid .gi4x4.three {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 9;
grid-row-end: 13;
}
.grid .gi20x12 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 13;
}
* { box-sizing: border-box; }
<div class="grid">
<figure class="gi13x12">
<img itemprop="image" src="http://placehold.it/130x123">
</figure>
<figure class="gi11x6 one">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi11x6 two">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi4x4 one">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 two">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 three">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi20x12">
<img itemprop="image" src="http://placehold.it/200x120">
</figure>
</div>
Firefox中的酷网格叠加功能
在Firefox开发工具中，当您检查网格容器时，CSS声明中有一个微小的网格图标。单击时，它会在页面上显示网格的轮廓。