Dash App acting strange when I run it with CSS grid

I need some help with my code, I think it would be best if I share my code from Github. I created a separate branch called css_problem_branch to display the issue I’m having.

Link to Github repository: https://github.com/sebastian-meckovski/Covid19-visualisation/tree/css_problem_branch

The simple grid layout I’m trying to recreate can be found in the CssGrid folder, it was done using simple HTML elements and it works. That’s just to demonstrate what I’m trying to recreate.

However, when I use exactly the same CSS in the assets folder, the web application starts acting strange. It does not reorganize the grid when I reduce the width of the browser and when I reduce it the width of the container element becomes extremely big (which works fine with plain HTML elements)

What could be the cause and how can I solve it?

Solution

Explanation about what is probably happening

I think the problem you're experiencing is an instance of what people have called a grid blowout.

Basically what's happening is that the children of the grid take up too much space causing the columns to get pushed off to the right.

So the reason you're not experiencing problems in your small html-only example is because the children are just div elements with some small amount of text inside.

The graphs in your Dash app however can grow very large, as you've experienced.

To fix this we can set a restrained size range for the columns using the minmax css function:

Solution to the problem

Instead of this:

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

try this:

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

Sources used (More in depth explanation about the topic than I did here):