Строки перекрываются в CSS Grid
Мой .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;
}
Почти - если я изменю свои .dailyChart-grid-numbers - grid-row: 1/2, тогда он покажет правильные позиции: imgur.com/a/dv6WtvB За исключением того, что теперь сетка не простирается полностью вниз.
Ответы 1
Вы не определили ни одной строки. Это означает, что строки создаются неявно.
Высота неявных строк регулируется свойством grid-auto-rows, значение которого по умолчанию - auto. И в этом проблема - значение auto, которое относительно других элементов на той же дорожке.
Если вы определите значение, проблема будет решена. Попробуйте что-то вроде этого:
.dailyChart {
display: grid;
grid-template-columns: repeat(24, 1fr);
grid-auto-rows: 25px; /* new */
}
https://codesandbox.io/s/100vxj7wr7
Но я хочу, чтобы высота строк соответствовала их содержимому. Жесткое кодирование значения пикселя не кажется хорошим решением.
Можете ли вы показать ожидаемый результат? Также было бы полезно, если бы вы не использовали React, поскольку это ограничивает круг тех, кто сможет вам помочь.