CSS网格自动调整和最小-最大留有空白

Question

我正在使用CSS Grid设置以下结构： 但是，当我调整视口大小时，结构变形了：

我尝试使用 grid-template-columns: repeat(auto-fit, minmax(200px,1fr)) 要解决此问题，希望自动调整将占用“发生了什么？”右侧和“ SHSAT Blues”左侧的其余空白。我怀疑最小宽度为200px可能是原因，因为要使浏览器在“发生了什么？”右侧再加上一个div，轨道的宽度可能需要小于200px。因此，我将200px更改为auto，但这无法解决问题。

.container{
    display:grid;
    width:100%;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    grid-gap:30px;
}

.item{
    background-color:#FFC300;
}

.item-1{
    grid-column:1/-1;
}

.item-4{
    grid-column:3/5;
}

.item-5{
    grid-column:1/4;
}

.item-8{
    grid-column:2/4;
}

完整代码@ https://codepen.io/Refath/pen/Odaovw?editors=1100 我期望auto-fit和min-max属性可以使我的CSS Grid完全响应，但是我不知道哪里出了问题。谢谢。

Answer 1

那么您有1、4、5和8项的选择器。那就是说出您希望它们位于哪些行和列等中。为什么不对所有项都包括它，所以可以手动放置他们？只需几分钟。

如果您调整屏幕大小，它们也将随处移动，因为只有某些屏幕具有定义的位置，因此也许尝试使用媒体查询来解决此问题。为许多屏幕尺寸创建CSS网格可能需要一些时间，但可以解决该问题，并且看起来不错。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp