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

Question

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

Github 仓库链接：https://github.com/sebastian-meckovski/Covid19-visualisation/tree/css_problem_branch

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

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

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

Answer 1

解释可能发生的事情

我认为您遇到的问题是人们称之为grid blowout 的一个实例。

基本上发生的情况是网格的子元素占用了太多空间，导致列被推到右侧。

因此，您在纯 html 的小示例中没有遇到问题的原因是，子元素只是 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/