尽管空白和边距都为零,但无法弄清楚为什么CSS网格布局会在垂直单元格周围的内容上添加不必要的额外空间:

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

.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/

最佳答案

垂直间隙是由图像未填充网格元素中的垂直空间引起的。

容器上的align-items: center使问题变得更糟,该容器删除了align-items: stretch的默认设置。

本质上,网格元素之间没有间隙。它们形成干净整洁的网格。但是,因为图像小于包含它们的元素,然后使用align-items将这些元素垂直居中,所以存在很多空隙。

这是更详细的说明,使用Firefox的网格覆盖工具进行说明:

(1)当grid-row-gapgrid-column-gap为0 时,这是您的网格:

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

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

(2)当grid-column-gap为10px
时,没问题:

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

(3)但是看看grid-row-gap为10px
会发生什么:

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

网格项(红线)整齐地包裹了它们的内容(图像)。发生这种情况仅是因为容器设置为align-items: center

(4)现在,我们删除align-items: center(恢复默认的stretch值),并保留grid-column-gap: 10pxgrid-row-gap: 10px:

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

如您所见,网格元素(具有红色边框和黄色背景)现在展开全高。但是小于元素的图像会留有空隙。

(5)这是上面(4)的网格,没有指示器。

align-items: stretch

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

align-items: center (与问题中的布局相同)

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

(6)因此,关键是使图像充满网格元素。

一种简单的解决方案是将display: flex应用于网格项,这将自动将align-items: stretch分配给图像,从而使图像占据全部高度。

然后,根据您希望图像的外观,可以使用object-fit来管理图像的外观。

将此添加到您的代码:

.grid figure {
   display: flex;
}

.grid figure img {
   object-fit: cover; /* also try `contain` and `fill` */
}

通过上面的调整,网格呈现如下:

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

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声明中有一个微小的网格图标。单击时,它会在页面上显示网格的轮廓。

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

此处有更多详细信息:https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

10-05 21:03
查看更多