Как сверстать грид в гриде с динамической шириной и переносом карточек?

Question

[Евгений Журов]

Набросал в песочнице базовый пример.
Суть задачи в следующем:
Есть грид-контейнер (.grid), в котором может быть любое количество прямых потомков (.grid-element).
Внутри каждого .grid-element может быть произвольное количество карточек (.grid-card)
Необходимо динамически устанавливать ширину каждого .grid-element, в зависимости от количества его карточек, а также карточек его nth-chind(even/odd).
Ширина каждой карточки должна быть не меньше и не больше 25% ширины .grid (не .grid-element!). Например, в песочнице вижно, что первый и третий .grid-element занимают 50% ширины родителя. А требуется, чтобы при таком количестве карточек (по одной) они занимали 25% от родителя. И только если у кого-то из них появился 2+ карточек, тогда начинали занимать 50%. Иначе говоря, если у первого .grid-element одна карточка (и у третьего тоже) - то карточка эта занимает ширину 100% родителя, а сам родитель занимает 25% от .grid. А если, скажем, в третьем (или первом) появляется вторая карточка - то и первый и третий начинают занимать 50% от .grid, а карточки внутри них - 50% от .grid-element. Аналогично и с четными .grid-element Т.е. получается, что карточка как бы всегда шириной в 25% от .grid.

Надеюсь не слишком сумбурно))

Возможно ли сделать подобное, используя css grid? Или, черт с ним, хоть на флексах/флоатах, на чем угодно). Не получается ни так, ни эдак сделать.

Comments

[Георгий Еремеев]

https://jsfiddle.net/u8zd74Lf/1/ как вариант

[Евгений Журов]

Георгий Еремеев, спасибо, но, боюсь, это совсем не то. Базовая структура должна остаться неизменной, т.к. у меня в дочерних гридах еще много чего есть, помимо карточек, да и сайт динамический, и я заведомо не могу знать, где и в каком месте должен будет находится .grid-two

[Ankhena]

Кажется, нужно начать расписывать условия.
Сначала по-русски. И с картинками.

Если будет 2 дочерних .grid-element, в одном 5 .grid-card, в другом 3.
Как это должно выглядеть?

[Евгений Журов]

Ankhena, тогда каждый .grid-element будет шириной по 50% от родителя. В каждой строке каждого .grid-element будет по две карточки. Выглядеть будет вот так. Собственно, код, который я привел в вопросе так и делает. И если в каждом .grid-element хотя бы по две карточки, то всё супер.

Проблема же в том, что если, скажем в первом .grid-element одна карточка, то он все равно занимает 50% от родителя. Мне же нужно, чтобы его ширина сокращалась до ширины этой одной карточки, т.е. занимала 25% от родителя. Причем, ширину карточки я тоже не могу задать статично, она разная при разной ширине экрана.
А если, скажем, три карточки - то третья переносится на новую строку в том же контейнере. То есть у .grid-element должна быть как бы min-width 25% и max-width: 50%.

[Ankhena]

Евгений Журов, я бы попробовала пересчитать ваши 25% на vw
И что-нибудь типа auto-fill

[Евгений Журов]

Ankhena, я в итоге сказал дизайнеру, что он придумал дичь, и мы решили отказаться от этой идеи))
С vw теоретически можно заморочиться, но там адская функция получится, т.к. надо еще учесть ширину общего контейнера (которая тоже на разных брейкпоинтах разная), сайдбара, всяких паддингов... В этом случае проще, наверное, на js что-то написать. А еще проще - немного пересмотреть дизайн, что мы и сделали)

[Ankhena]

Евгений Журов,

(которая тоже на разных брейкпоинтах разная)

К счастью есть кастомные свойства.

Еще есть вот такое https://css-live.ru/articles/resheno-s-pomoshhyu-c...
Но в вашем случае не поможет, слишком много неизвестных.
И пришли бы в итоге к JS.

я в итоге сказал дизайнеру, что он придумал дичь, и мы решили отказаться от этой идеи))

Какой покладистый. Повезло вам :)