Сбивается высота в css-grid при 1 fr?

Question

[Vann Damm]

Есть компонент футер

Которому родительский элемент добавляет grid-template-rows: 1fr;
После чего он становится слишком выскоим, а не адаптируется количество написанного текста и пр. Выглядит это вот так:

Решается это только если захардкодить grid-template-rows: 150px например. Мне же нужен адаптив

Answer 1

[Арсений Матыцин]

Такое происходит, когда есть 2 и более блоков один за другим, где в одном есть контент, а в других размер эквивалентен в соответствии с правилом 1fr.

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

Comments

[Vann Damm]

Решил эту проблему, только чуть другим способом. Но она как ни странно появилась опять на других компонентах. И я решил разобраться. Вы написали, что этот элемент(блок), которому присваивается 1fr , принимает размер содержащего контент, да принимает, но ведь мой элемент тоже содержит контент и почему он принимает размер другого элемента? Если я, якобы задаю трём дивам , по 1fr на див, а третий див берет и наследует размер первого дива? Кстати убирается это всё с помощью удаления display: grid, до этого думал что без display:grid , grid-template работать не будет. Получается это свойство каким-то образом жёстко фиксирует у всех дочерних элементов размеры, выходит логика какая-то не логичная в его работе