为什么CSS Grid布局会在单元格之间增加额外的间隙？

Question

无法弄清楚为什么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>

https://jsfiddle.net/adanchenkov/dy77hk9k/

Answer 1

垂直间隙是由未填充网格项中的垂直空间的图像引起的.

align-items: center容器上的问题变得更糟,删除了align-items: stretch默认值.

基本上,网格项之间没有间隙.它们形成一个干净,整齐排列的网格.但由于图像小于包含它们的项目,并且项目然后垂直居中align-items,因此存在大量间隙.

这里有一个更详细的解释,使用Firefox的网格覆盖工具进行说明:

(1)当grid-row-gapgrid-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声明中有一个微小的网格图标.单击它会在页面上显示网格的轮廓.

更多细节:https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Answer 2

请注意，此答案是在最新更新之前发布的，因此，以不同的方式回答初始代码示例（问题中的代码示例）。迈克尔出色地回答了该问题的编辑版本。

首先，内部空间与 CSS Grid、边距或填充无关，它来自以下事实： animg是一个内联元素，它像字符一样，在基线下方对于下行元素有一个空白。

一种解决方案是添加display: block规则.grid figure img。

.grid figure img {
  display: block;
  width: 100%;
}

其次，外层空间是由 引起的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 figure img {
  display: block;
  width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: 13fr 11fr 4fr 20fr;
  /*grid-auto-rows: 12fr;                      remove this  */
  grid-gap: 3px;
  align-items: flex-start;
}

关于您的 Fiddle 示例（并添加了屏幕转储），两者都不匹配内部代码示例，并且经过上述调整后，仍然有一个小的内部空间，这是由于较小元素高度的总和不匹配造成的最高的图像也不是，因为最高的图像为 123 像素，但较小的图像为 120 像素 (2*60) 和 117 像素 (3*39)。