使用自动调整时CSS网格中的间隙折叠 - 当列包裹

Question

我尝试使用CSS网格的auto-fit功能整齐地为不同的屏幕尺寸包装网格项。当我放入auto-fit ted网格容器的所有项目大小相同时，这很有效;然而，如果我制作不同尺寸的物品，对于小屏幕尺寸，当物品包裹时，我会得到不合需要的尺寸。

此代码段说明了我遇到的问题（如果您调整浏览器窗口的大小，则可以清楚地看到问题）：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class='wrapper'>
  <div class='first'>
   First
  </div>    
  <div class='second'>
    Second
  <div>
</div>

＆＃13;

＆＃13;

＆＃13;

此不同行为的屏幕截图显示了正在发生的事情：

图片1是全屏时项目大小相同时显示的内容 - 这包含在图片2中。

图3是当项目大小不同时显示的内容 - 这首先包装到图片4（预期），但随后包装到图片5 - 这与图片2不同。（这将是理想的行为） - 这两个项目的大小不同。

我怀疑这是因为网格项目在较小的屏幕尺寸下按照auto-fit折叠，但没有折叠折叠的网格项之间的间隙。 Chrome中的调试显示了这一点，但我不知道如何克服它！

我是否在正确的轨道上？当我放入容器中的物品尺寸不同时，有没有办法在图2中获得所需的行为？

Answer 1

使用宽度：100％;和浮动：如果您使用的是html但是没有看到您的HTML代码无法正确分辨，则在主div上留下。如果你在这里粘贴你的部分代码会很好。