Html CSS网格神秘空白_Html_Css_Google Chrome_Css Grid

Html CSS网格神秘空白

html css google-chrome

Html CSS网格神秘空白,html,css,google-chrome,css-grid,Html,Css,Google Chrome,Css Grid,我试图用CSS网格创建一个图像网格，出于某种原因，我在网格的前两个项目周围得到了神秘的空白。当检查图像时，我没有看到标记为填充、边距或正常边框的图像我尝试从网格内部移除flex容器，但没有任何改变在FF和Safari上，网格按预期工作，但在Chrome上，它会中断，并将网格推到我在页面上的下一项上，有什么想法吗。赞助商部门{ 显示：网格；左边距：自动；右边距：自动；网格模板列：重复（自动填充，最小值（200px，1fr））；网格模板行：25%自动； } .赞助a组{ 显示器：fl

我试图用CSS网格创建一个图像网格，出于某种原因，我在网格的前两个项目周围得到了神秘的空白。当检查图像时，我没有看到标记为填充、边距或正常边框的图像

我尝试从网格内部移除flex容器，但没有任何改变

在FF和Safari上，网格按预期工作，但在Chrome上，它会中断，并将网格推到我在页面上的下一项上，有什么想法吗

。赞助商部门{
显示：网格；
左边距：自动；
右边距：自动；
网格模板列：重复（自动填充，最小值（200px，1fr））；
网格模板行：25%自动；
}
.赞助a组{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大高度：200px；
}
.保荐人组{
网格列开始：2；
网格柱端：5个；
网格行开始：行1开始；
网格行端：3；
过渡：所有0.2秒缓解；
最大宽度：150px；
-webkit过滤器：灰度（100%）；
/*Safari 6.0-9.0*/
滤镜：灰度（100%）；
}
.赞助商部门img：悬停{
转换：比例（1.3）；
-webkit过滤器：灰度（0%）；
/*Safari 6.0-9.0*/
滤镜：灰度（0%）；
}

这可能解决您所描述的问题，也可能无法解决，但无论如何，这是一个更大的问题

HTML结构中有三个级别：

主容器（

赞助商div

）

网格项/嵌套的flex容器（

）

弹性项目（

img

）

问题是您正在将网格属性应用于网格容器的子级

栅格特性仅在父子关系中起作用。网格容器是父容器。网格项是子项

子对象（如

img

grand children）之外的网格容器的任何子对象都不在网格布局的范围内，将忽略网格属性

更多详细信息：

这可能解决您描述的问题，也可能无法解决，但无论如何，这是一个更大的问题