【发布时间】：2017-12-11 18:34:44
【问题描述】：
我正在尝试使用 CSS 网格的 auto-fit 功能来为不同的屏幕尺寸整齐地包装网格项目。当我放入auto-fitted 网格容器的所有项目大小相同时，这很有效；但是，如果我将项目设置为不同的尺寸，对于小屏幕尺寸，当项目包装时，我会得到不希望的尺寸。
这段代码 sn-p 说明了我遇到的问题（如果您调整浏览器窗口的大小，您可以清楚地看到问题）：
.wrapper {
display: grid;
padding: 10px;
width: 90%;
grid-gap:10px;
grid-template-columns:
repeat(auto-fit, minmax(300px, 1fr));
box-sizing: border-box;
border: 1.5px solid darkblue;
}
.first{
grid-column: span 1;
box-sizing: border-box;
border: 1.5px solid darkgrey;
}
.second{
grid-column: span 2;
box-sizing: border-box;
border: 1.5px solid darkgrey;
}<div class='wrapper'>
<div class='first'>
First
</div>
<div class='second'>
Second
<div>
</div>这张不同行为的屏幕截图显示了正在发生的事情：
图片 1 是当项目在全屏时的大小相同时显示的内容 - 这包含到图片 2。
图片 3 是当项目大小不同时显示的内容 - 这首先包裹到图片 4（预期），然后包裹到图片 5 - 这与图片 2 不同。（这将是理想的行为） - 这两个项目的大小不同。
我怀疑这是由于在较小的屏幕尺寸下网格项按照auto-fit 折叠，但没有折叠折叠的网格项之间的间隙。在 Chrome 中调试显示了这一点，但我不知道如何克服它！
我在正确的轨道上吗？当我放入容器中的物品大小不同时，有什么方法可以在图 2 中获得所需的行为？
【问题讨论】：
-
问题是你在第一个项目上有
span: 1，在第二个项目上有span: 2。因此，当它们包装时，它们会保留这些尺寸。然后是在创建第二行后保留在第一行的未占用网格单元的问题。然后是grid-column-gap的问题。很多事情要克服；您的问题中关于您的总体目标的详细信息不足。 -
@ahx 直接在帖子中添加minimal reproducible example，而不是链接到场外代码沙箱，您的问题会得到很大改善。
-
感谢您回到我身边。我的总体目标是获得图 2 的效果。当物品包装时，即使它们的尺寸不同。关于你的观点：我故意让它们跨越两种不同的尺寸，因为我希望它们在同一行时以这些比例显示。当它们换行时，我可以看到正在创建一个未占用的网格单元，但由于它是空的，我不知道为什么它没有完全折叠 - 这不是
auto-fit应该做的吗？恐怕我不明白你的意思：grid-column-gap。 -
@TylerH 我的 codepen 在我的计算机上查看它时确实说明了问题（并调整浏览器的大小以模拟小屏幕尺寸）。结合截图，我认为这可以满足这些要求。我不确定它在什么方面不是最小的、完整的和可验证的？我现在看看如何将它直接添加到堆栈溢出中。
-
一切正常，再次感谢。我认为网格能够解决我所有的布局问题，但我会更详细地研究 flexbox。仅供参考，如果我将 wrapper 上的 grid-gap 设置为 0，尺寸不均匀的问题就会消失，但布局过于狭窄。
标签： css grid-layout css-grid