CSS Grid auto-fit 和 min-max 留下空白答案

【问题标题】：CSS Grid auto-fit and min-max leaves whitespaceCSS Grid auto-fit 和 min-max 留下空白
【发布时间】：2019-02-16 21:40:37
【问题描述】：

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

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

.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 完全响应，但我不明白我哪里出错了。谢谢。

【问题讨论】：

您能在此处包含您的解决方案吗？我面临着类似的问题，想知道你是如何解决的

标签： html css css-grid

【解决方案1】：

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

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

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

【讨论】：

媒体查询太麻烦了。我使用 grid-start 和 grid-end 来修复它。