为什么 CSS 网格布局会在单元格之间添加额外的间隙？
Why does CSS Grid layout add extra gaps between cells?
无法弄清楚为什么 CSS 网格布局会向垂直单元格周围的内容添加不需要的额外内容 space，尽管边距和填充被清零：
.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>
删除单元格放置后的间隙“grid-gap: 0px;” .grid css class
您可以通过使图像浮动来删除图中的 space。
.grid figure img {
margin: 0;
padding: 0;
width: 100%;
float: left;
}
请查找更新码here。
注意，这个答案是在最新更新之前发布的，因此，以不同的方式回答初始代码示例（问题中的那个）。迈克尔出色地回答了问题的编辑版本。
首先，内部的space与CSS网格、边距或填充无关，它来自于img是一个内联元素，类似于字符在基线下方有一个白色 space，用于后裔。
一个解决方案是将 display: block 添加到 .grid figure img 规则。
.grid figure img {
display: block;
width: 100%;
}
其次，外部 space 是由 grid-auto-rows 引起的，因此请将其从 .grid 规则中删除。
.grid {
display: grid;
grid-template-columns: 13fr 11fr 4fr 20fr;
/*grid-auto-rows: 12fr; remove this */
grid-gap: 3px;
align-items: flex-start;
}
堆栈片段
.grid {
display: grid;
grid-template-columns: 13fr 11fr 4fr 20fr;
/*grid-auto-rows: 12fr; removed */
grid-gap: 3px;
align-items: flex-start;
}
.grid figure {
outline: 1px solid red;
margin: 0;
padding: 0;
}
.grid figure img {
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>
关于您的Fiddle示例（并添加了屏幕转储），两者都与内部代码示例不匹配，经过上述调整后，内部仍然有一个小space，这是由事实上，较小元素高度的总和与最高元素不匹配，其图像也不匹配，因为最高图像为 123px，但较小图像为 120px (2*60) 和 117px (3*39)。
垂直间隙是由于图像未填充网格项目中的垂直 space 造成的。
容器上的 align-items: center 使问题变得更糟，它删除了 align-items: stretch 默认值。
本质上，网格项之间没有间隙。它们形成一个干净、排列整齐的网格。但是因为图像比包含它们的项目小，然后项目以 align-items 垂直居中，所以有很多间隙。
这里有更详细的解释，使用Firefox的网格覆盖工具来说明：
(1) 当 grid-row-gap 和 grid-column-gap 为 0:[=40 时，这是你的网格 =]
红线代表网格项。图像是网格项目的内容。虚线表示网格线。
(2)当grid-column-gap为10px时没有问题:
(3) 但是看看 当 grid-row-gap 是 10px:
时会发生什么
网格项（红线）整齐地包裹着它们的内容（图像）。发生这种情况只是因为容器设置为 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 声明中有一个小网格图标。单击它会在页面上显示网格的轮廓。
此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
无法弄清楚为什么 CSS 网格布局会向垂直单元格周围的内容添加不需要的额外内容 space，尽管边距和填充被清零：
.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>
删除单元格放置后的间隙“grid-gap: 0px;” .grid css class
您可以通过使图像浮动来删除图中的 space。
.grid figure img {
margin: 0;
padding: 0;
width: 100%;
float: left;
}
请查找更新码here。
注意，这个答案是在最新更新之前发布的，因此，以不同的方式回答初始代码示例（问题中的那个）。迈克尔出色地回答了问题的编辑版本。
首先，内部的space与CSS网格、边距或填充无关，它来自于img是一个内联元素，类似于字符在基线下方有一个白色 space，用于后裔。
一个解决方案是将 display: block 添加到 .grid figure img 规则。
.grid figure img {
display: block;
width: 100%;
}
其次，外部 space 是由 grid-auto-rows 引起的，因此请将其从 .grid 规则中删除。
.grid {
display: grid;
grid-template-columns: 13fr 11fr 4fr 20fr;
/*grid-auto-rows: 12fr; remove this */
grid-gap: 3px;
align-items: flex-start;
}
堆栈片段
.grid {
display: grid;
grid-template-columns: 13fr 11fr 4fr 20fr;
/*grid-auto-rows: 12fr; removed */
grid-gap: 3px;
align-items: flex-start;
}
.grid figure {
outline: 1px solid red;
margin: 0;
padding: 0;
}
.grid figure img {
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>
关于您的Fiddle示例（并添加了屏幕转储），两者都与内部代码示例不匹配，经过上述调整后，内部仍然有一个小space，这是由事实上，较小元素高度的总和与最高元素不匹配，其图像也不匹配，因为最高图像为 123px，但较小图像为 120px (2*60) 和 117px (3*39)。
垂直间隙是由于图像未填充网格项目中的垂直 space 造成的。
容器上的 align-items: center 使问题变得更糟，它删除了 align-items: stretch 默认值。
本质上，网格项之间没有间隙。它们形成一个干净、排列整齐的网格。但是因为图像比包含它们的项目小，然后项目以 align-items 垂直居中，所以有很多间隙。
这里有更详细的解释，使用Firefox的网格覆盖工具来说明：
(1) 当 红线代表网格项。图像是网格项目的内容。虚线表示网格线。 (2)当 (3) 但是看看 当 网格项（红线）整齐地包裹着它们的内容（图像）。发生这种情况只是因为容器设置为 (4) 现在让我们删除 如您所见，网格项（具有红色边框和黄色背景）现在展开全高。但是图像比项目小，留下了空白。 (5) 这是上面 (4) 中没有指标的网格。 (6) 所以关键是让图片填满网格项 一个简单的解决方案是将 然后，根据您希望图像的外观，您可以使用 将此添加到您的代码中： 通过上述调整，网格呈现如下：grid-row-gap 和 grid-column-gap 为 0:[=40 时，这是你的网格 =]
grid-column-gap为10px时没有问题:
grid-row-gap 是 10px:align-items: center.
align-items: center（恢复默认的 stretch 值）并保留 grid-column-gap: 10px 和 grid-row-gap: 10px:
align-items: stretchalign-items: center（与问题中的布局相同）
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 声明中有一个小网格图标。单击它会在页面上显示网格的轮廓。
此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts