При определении макета сетки CSS я определил строки сетки следующим образом i:
grid-template-rows: repeat(7, 0.14fr)
Это привело к некоторому непонятному поведению, когда сетка отказалась распределятьоставшееся пространство полностью;вместо этого было немного свободного места прямо в конце.
Я пробовал то же самое, но на этот раз с использованием столбцов:
grid-template-columns: repeat(7, 0.14fr)
Это привело к тому же поведению.Затем я изменил значения следующим образом, увеличив 0.14fr до 0.15fr :
grid-template-rows: repeat(7, 0.15fr)
Это снова все исправило.Просто чтобы убедиться, что не было проблем с моей стороны, которые делали вещи странными, я настроил ту же ситуацию в Codepen: Weird CSS Grid - ручка .
Когда проблема повториласьСам я открыл Codepen на Chrome, чтобы увидеть, был ли он специфичным для браузера: это не так.То же самое случилось снова.Ниже я прикрепил простой код того, что я пытался сделать, с единицами fr , настроенными на 0.9fr , просто чтобы прояснить разницу.
.box {
display: grid;
height: 80vh;
width: 400px;
margin-right: 50px;
box-sizing: border-box;
background-color: black;
border: 1px solid red;
/* ---------- Weird stuff starts here ---------- */
/* grid-template-columns: repeat(7, 0.15fr); */
grid-template-rows: repeat(7, 0.09fr);
/* ---------- Weird stuff ends here ---------- */
}
.box .temp:nth-child(even) {
background-color: white;
}
.box .temp:nth-child(odd) {
background-color: cornflowerblue;
}
<div class="box">
<div class="temp temp--1"></div>
<div class="temp temp--2"></div>
<div class="temp temp--3"></div>
<div class="temp temp--4"></div>
<div class="temp temp--5"></div>
<div class="temp temp--6"></div>
<div class="temp temp--7"></div>
</div>
Является ли это ошибкой, машинной проблемой, невинной маленькой причудой, просто как работает CSS-Grid и вычисляет fr единиц или это проблема конкретного браузера?
Примечание:
Мой основной браузер - Firefox, но я пытался реплицироватьэто также в Chrome.
Так как браузер вычисляет ширину fr на ходу, может быть вероятность того, что это может быть воспроизведено только намоя машина.(Я думаю? Не уверен.)
Это может быть дополнительный случай, я согласен.Зачем определять fr единиц, используя меньшие числа, как показано ниже, когда я могу просто использовать числа больше 0.15 или 1 , на самом деле?Я столкнулся с этой проблемой (причудой?), Только когда набрал дробные значения макета;Я вычислил значения fr , разделив длину в пикселях дочерних элементов на длину в пикселях родительского контейнера, что, очевидно, меньше 1.
Я использовал CSS, а не SASS, потому что подумал, что, возможно, препроцессор SASS делает что-то странное за кулисами (надумано, я знаю, но я не хотел рисковать).
Точка останова между 0.14fr и 0.15fr может быть характерна только для моей машины.