Строки перекрываются в CSS Grid - PullRequest
Новая
       22

Строки перекрываются в CSS Grid

0 голосов
/ 08 июня 2018

Мой .dailyChart-grid-numbers должен позволять мне перечислять числа на самом верхнем слое, а их границы должны расширяться до конца.Все работает, кроме .dailyChart-box-top настаивает на том, чтобы разделить ту же строку, что и .dailyChart-grid-numbers.

Вот оно в действии: https://codesandbox.io/s/z6y936r2mx

Вот только CSS: 

.dailyChart{
    display: grid;
    grid-template-columns: repeat(24,1fr)
}
.dailyChart-box-middle{
    background-color: red;
    border-right: 2px solid #000000;
    grid-row: 3/4
}

.dailyChart-box-top{
    background-color: green;
    grid-row: 2/3;
}

.dailyChart-box-bottom{
    background-color: blue;
    grid-row: 4/5;
}

.dailyChart-grid-numbers{
    border-right: 1px solid #000000;
    grid-row: 1/5;
    align-items: start;
}

1 Ответ

0 голосов
/ 08 июня 2018

Вы не определили ни одной строки.Это означает, что строки создаются неявно.

Высота неявных строк определяется свойством grid-auto-rows, значение по умолчанию которого равно auto.И это проблема - значение auto, относящееся к другим элементам на той же дорожке.

Если вы определите значение, проблема, похоже, будет решена.Попробуйте что-то вроде этого: 

.dailyChart {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: 25px; /* new */
}

https://codesandbox.io/s/100vxj7wr7

...