当我 运行 它带有 CSS 网格时，Dash App 表现得很奇怪

Question

我的代码需要一些帮助，我认为如果我从 Github 分享我的代码会更好。我创建了一个名为 css_problem_branch 的单独分支来显示我遇到的问题。

Link 到 Github 存储库：https://github.com/sebastian-meckovski/Covid19-visualisation/tree/css_problem_branch

我正在尝试重新创建的简单网格布局可以在 CssGrid 文件夹中找到，它是使用简单的 HTML 元素完成的，并且有效。这只是为了展示我正在尝试重新创建的内容。

但是，当我在资产文件夹中使用完全相同的 CSS 时，Web 应用程序开始表现得很奇怪。当我减小浏览器的宽度时，它不会重新组织网格，当我减小它时，容器元素的宽度变得非常大（这适用于普通 HTML 元素）

可能是什么原因，我该如何解决？

Answer 1

关于可能发生的事情的解释

我认为您遇到的问题是人们所说的 grid blowout。

基本上发生的事情是网格的子项占用了太多 space 导致列被推到右边。

所以你在 html-only 的小例子中没有遇到问题的原因是因为子元素只是 div 元素，里面有一些少量的文本。

然而，您的 Dash 应用程序中的图表可能会变得非常大，正如您所经历的那样。

要解决此问题，我们可以使用 minmax css function:

为列设置限制大小范围

问题的解决

而不是这个：

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "content0 content0"
    "content1 content1"
    "content2 content3"
    "content4 content4";
  grid-gap: 2px;
}

@media only screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "content0"
      "content1"
      "content2"
      "content3"
      "content4";
  }
}

试试这个：

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "content0 content0"
    "content1 content1"
    "content2 content3"
    "content4 content4";
  grid-gap: 2px;
}

@media only screen and (max-width: 600px) {
  .container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 0.1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "content0"
      "content1"
      "content2"
      "content3"
      "content4";
  }
}

---

使用的来源（关于该主题的解释比我在这里做的更深入）：

• https://css-tricks.com/preventing-a-grid-blowout/
• https://blog.agney.dev/grid-blowout/