时间戳

首页 > 解决方案 > 当我使用 CSS 网格运行 Dash App 时，它表现得很奇怪

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

问题描述

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

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

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

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

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

标签： pythoncssdashboardplotly-dash

解决方案

解释可能发生的事情

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

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

因此，您在仅 html 的小型示例中没有遇到问题的原因是子级只是div其中包含少量文本的元素。

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

为了解决这个问题，我们可以使用minmax css 函数为列设置一个受限制的大小范围：

问题的解决方案

而不是这个：

.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";
  }
}

使用的来源（比我在这里更深入地解释这个话题）：

推荐阅读