Некорректно работает значение 1fr в свойстве grid-template-columns. В чем причина?

Question

[Станислав Зиненко]

На сайте https://krupnov-nn.ru/ есть блок с id="owl_slider"
Карусель там отключена. Пытаюсь через панель разработчика отобразить её как display: grid; grid-template-columns: 1fr 1fr 1fr; но почему-то вложенные блоки считаются неправильно и им выставляется ширина 505px. При этом, если выставить grid-template-columns: repeat(3, 33.33%); то всё работает корректно.
Почему 1fr считается неправильно?

Comments

[Ankhena]

Выложите неработающий пример с вашими стилями в песочницу jsfiddle.net или codepen.io

Пока предположу, что вы забыли убрать абсолюты у дочерних элементов.

[Алекс]

Выше комментатор прав, абсолют у дочерних все ломает.

[Станислав Зиненко]

Ankhena, дело не в них. В инструментах разрботчика прописывал элементам display: none. Всё равно главный блок вылазит за экран.

[Станислав Зиненко]

Алекс, пробовал в инструментах разработчика убрать у элементов position: absolute. Результат тот же.

[Ankhena]

Станислав Зиненко, у меня никто никуда не "вылазит".
Воспроизведите проблему в песочнице.

Answer 1

[Антон Усачев]

Так пробовали?
grid-template-columns: repeat(3, 1fr);

Comments

[Станислав Зиненко]

Да, но не получается(

[Антон Усачев]

Станислав Зиненко, у вложенного блока жестко задана ширина, надо убрать, и все получится:

.slider-title-wrap{width: 465px; }