html - 为什么 CSS 网格布局会在单元格之间添加额外的间隙？

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-gap 和 grid-column-gap 为 0 时，这是您的网格 :

红线代表网格项。图像是网格元素的内容。虚线表示网格线。

---

(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) 中没有指示器的网格。

对齐元素:拉伸(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` */
}

通过上述调整，网格呈现如下:

revised fiddle

.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