无法弄清楚为什么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>
解决方法
垂直间隙是由未填充网格项中的垂直空间的图像引起的.
对齐项目使问题变得更糟：容器中心,这会删除对齐项目：拉伸默认值.
基本上,网格项之间没有间隙.它们形成一个干净,整齐排列的网格.但是因为图像比包含它们的项目小,并且项目然后使用对齐项目垂直居中,所以存在许多间隙.
这里有一个更详细的解释,使用Firefox的网格覆盖工具进行说明：
(1)当网格行间隙和网格列间隙为0时,这是您的网格：
红线代表网格项.图像是网格项的内容.虚线表示网格线.
(2)当网格列间隙为10px时没有问题：
(3)但看看当网格行间隙是10px时会发生什么：
网格项(红线)整齐地包裹其内容(图像).这只是因为容器设置为align-items：center.
(4)现在让我们删除align-items：center(恢复默认的拉伸值)并保持grid-column-gap：10px和grid-row-gap：10px：
如您所见,网格项(具有红色边框和黄色背景)现在可以展开全高.但是,比项目小的图像留下了空白.
(5)这是上面(4)中没有指标的网格.
align-items：拉伸
align-items：center(与问题中的布局相同)
(6)所以关键是让图像填充网格项目.
一个简单的解决方案是将display：flex应用于网格项,这将自动分配对齐项：拉伸到图像,使它们占据全高.
然后,根据您希望图像的外观,您可以使用对象适合来管理它们的外观.
.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声明中有一个很小的网格图标.单击它会在页面上显示网格的轮廓.
更多细节：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
