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

概述无法弄清楚为什么CSS网格布局会为垂直单元格周围的内容添加不必要的额外空间,尽管边距和填充被清零： .grid { display: grid; grid-template-columns: 13fr 11fr 4fr 20fr; grid-auto-rows: 12fr; grid-gap: 4px; align-items: center;}.grid figure 无法弄清楚为什么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 >  <figure >    <img itemprop="image" src="http://placehold.it/130x123">  </figure>  <figure >    <img itemprop="image" src="http://placehold.it/110x60">  </figure>  <figure >    <img itemprop="image" src="http://placehold.it/110x60">  </figure>  <figure >    <img itemprop="image" src="http://placehold.it/40x39">  </figure>  <figure >    <img itemprop="image" src="http://placehold.it/40x39">  </figure>  <figure >    <img itemprop="image" src="http://placehold.it/40x39">  </figure>  <figure >    <img itemprop="image" src="http://placehold.it/200x120">  </figure></div>

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

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

对齐项目使问题变得更糟：容器中心,这会删除对齐项目：拉伸默认值.

基本上,网格项之间没有间隙.它们形成一个干净,整齐排列的网格.但是因为图像比包含它们的项目小,并且项目然后使用对齐项目垂直居中,所以存在许多间隙.

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

(1)当网格行间隙和网格列间隙为0时,这是您的网格：

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

(2)当网格列间隙为10px时没有问题：

(3)但看看当网格行间隙是10px时会发生什么：

网格项(红线)整齐地包裹其内容(图像).这只是因为容器设置为align-items：center.

(4)现在让我们删除align-items：center(恢复默认的拉伸值)并保持grID-column-gap：10px和grID-row-gap：10px：

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

(5)这是上面(4)中没有指标的网格.

align-items：拉伸

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

(6)所以关键是让图像填充网格项目.

一个简单的解决方案是将display：flex应用于网格项,这将自动分配对齐项：拉伸到图像,使它们占据全高.

然后,根据您希望图像的外观,您可以使用对象适合来管理它们的外观.

将其添加到您的代码中：

.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 >	<figure >		<img itemprop="image" src="http://placehold.it/130x123">	</figure>	<figure >		<img itemprop="image" src="http://placehold.it/110x60">	</figure>	<figure >		<img itemprop="image" src="http://placehold.it/110x60">	</figure>	<figure >		<img itemprop="image" src="http://placehold.it/40x39">	</figure>	<figure >		<img itemprop="image" src="http://placehold.it/40x39">	</figure>	<figure >		<img itemprop="image" src="http://placehold.it/40x39">	</figure>	<figure >		<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

总结

以上是内存溢出为你收集整理的html – 为什么CSS Grid布局会在单元格之间增加额外的间隙？全部内容，希望文章能够帮你解决html – 为什么CSS Grid布局会在单元格之间增加额外的间隙？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。