Почему внутренний grid блок не растягивается по своему содержимому?

Question

[Егор Астрейко]

Всем привет. Не могу понять, почему если в внутреннем блоке:

<div class="block-2">
        <div class="block-2__item"></div>
        <div class="block-2__item"></div>
        <div class="block-2__item"></div>
</div>

указать

display: grid;
column-gap: 21.64%;

он не имеет ширину своего контента
Ссылка на codepen
Мне необходимо сделать, что при уменьшении экрана, все отступы уменьшались равномерно. по логике если указывать gap в %, то при уменьшении ширины, отступы должны должны уменьшаться, но в итоге получается, что блок block-2 имеет не правильную ширину (выбрасывает последний свой элемент за границу).
Как это исправить ?
Заранее спасибо.

Comments

[Ankhena]

Вы пытаетесь одновременно определить ширину родителя по содержимому, а содержимое по родителю.

Как это исправить ?

Начать плясать от чего-то одного.