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

时间：2017-10-07 03:10:21

标签： html css css3 css-grid

无法弄清楚为什么CSS网格布局会为垂直单元格周围的内容添加不必要的额外空间，尽管边距和填充被清零：

images positioned with CSS grid

＆＃13;
＆＃13; 
.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;
}
＆＃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>
＆＃13;
＆＃13;
＆＃13;

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

4 个答案:

答案 0 :(得分：9)

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

容器上的align-items: center问题变得更糟，这会删除align-items: stretch默认值。

基本上，网格项之间没有间隙。它们形成一个干净，整齐排列的网格。但是因为图像小于包含它们的项目，然后项目与align-items垂直居中，所以存在很多空白。

以下是使用Firefox的网格叠加工具进行更详细的说明：

（1）当grid-row-gap和grid-column-gap为0 时，这是您的网格 ：

enter image description here

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

（2）当grid-column-gap为10px 时 没有问题：

enter image description here

（3）但是当grid-row-gap为10px 时，看看 会发生什么：

enter image description here

网格项（红线）整齐地包裹其内容（图像）。这只是因为容器设置为align-items: center。

（4）现在让我们删除align-items: center（恢复默认stretch值）并保留grid-column-gap: 10px和grid-row-gap: 10px：

enter image description here

如您所见，网格项目（具有红色边框和黄色背景）现在可以展开全高。但是图像比项目小，留下了空白。

（5）这是上面（4）中没有指标的网格。

<强> align-items: stretch

enter image description here

align-items: center （与问题中的布局相同）

enter image description here

（6）所以关键是要让图像填满网格项目。

一个简单的解决方案是将display: flex应用于网格项，这会自动为图像指定align-items: stretch，从而使它们占据全高。

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

将此添加到您的代码中：

.grid figure {
   display: flex;
}

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

通过上面的调整，网格呈现如下：

enter image description here

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

enter image description here

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

答案 1 :(得分：2)

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

首先，内部空间与CSS网格，边距或填充无关，它来自于img是一个内联元素，其中字符有一个空格，对于下行，下面是基线。

一种解决方案是将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;
}

Stack snippet

＆＃13;
＆＃13; 
.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;
}
＆＃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>
＆＃13;
＆＃13;
＆＃13;

关于你的小提琴样本（和添加的屏幕转储），其中既没有匹配内部代码样本，又经过上述调整后，仍然存在一个小的内部空间，这是由于较小元素总和的高度这一事实造成的与最高图像不匹配，图像也不匹配，因为最高图像为123px，但较小图像为120px（2 * 60）和117px（3 * 39）。

答案 2 :(得分：0)

您可以通过使图像浮动来移除图中的空间。

.grid figure img {
    margin: 0;
    padding: 0;
    width: 100%;
   float: left;
}

请查找更新代码here。

答案 3 :(得分：-1)

在单元格放置后删除间隙“grid-gap：0px;”到.grid css类

相关问题
最新问题