Мне нужна помощь с моим кодом, думаю, было бы лучше, если бы я поделился своим кодом из Github. Я создал отдельную ветку css_problem_branch, чтобы отобразить проблему, с которой я столкнулся.

Ссылка на репозиторий Github: https://github.com/sebastian-meckovski/Covid19 -visualisation / tree / css_problem_branch

Простой макет сетки, который я пытаюсь воссоздать, можно найти в папке CssGrid, он был сделан с использованием простых элементов HTML, и он работает. Это просто для демонстрации того, что я пытаюсь воссоздать.

Однако, когда я использую точно такой же CSS в папке с ресурсами, веб-приложение начинает вести себя странно. Он не реорганизует сетку, когда я уменьшаю ширину браузера, а когда я уменьшаю ее, ширина элемента контейнера становится чрезвычайно большой (что отлично работает с простыми элементами HTML)

В чем может быть причина и как ее решить?

1
Sebastian Meckovski 9 Фев 2021 в 16:10

1 ответ

Лучший ответ

Объяснение того, что, вероятно, происходит

Я думаю, что проблема, с которой вы столкнулись, является примером того, что люди называют 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";
  }
}

Используемые источники (более подробное объяснение темы, чем я сделал здесь):

1
Bas van der Linden 10 Фев 2021 в 20:42