html - CSS Grid 自动调整和 min-max 留下空白

Question

我正在使用 CSS Grid 来设置以下结构: 但是，当我调整视口(viewport)大小时，结构会变形:

我试过使用grid-template-columns: repeat(auto-fit, minmax(200px,1fr))解决这个问题，希望自动调整会占用“发生了什么？”右侧和“The 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