Как лучше отобразить создаваемый нажатием div в grid контейнере?

Question

[JuniorPro]

Делаю календарь с бронированием дат, окно кадендаря является grid контейнером, в нем есть rows div недели, каждый из которых содержит соответственно 7 div с датами(распределены по grid окну как (7, 1fr), при нажатии на дату в div недели добавляется div card, который содержит данные о свободном времени и возможность бронирования
Идея в том, чтобы данный div card появлялся между div недели, под выбранной датой и занимал +/- размер одного row
Проблема в том, что при свойстве row display flex, все съезжает, также как и при row display grid(просто в разные стороны) и смещение позиции card в css не помогает

Варианта, как я вижу, два
Первый - сделать разметку grid template и при нажатии на дату применять ее к div недели
Второй - добавлять card между rows(div недели) как отдельный row grid-контейнера

Подскажите, что лучше или есть вариант удобнее?

Вариант который нужен(серый блок card открыт под неделей с датой на которую нажали date chosen)


Вот так криво открывается сейчас, так как при нажатии на ту же дату, запакованный в grid div card просто создается как 8-й div и раздвигает 1-й div недели под свою ширину

Comments

[Ankhena]

Идея в том, чтобы данный div card появлялся между div недели, под выбранной датой и занимал +/- размер одного row

Кажется, на скрине нарисовано вообще не то.
Я бы рекомендовала нарисовать то, как оно должно себя вести и куда попадать.

Если не можете решить как оно должно себя вести, то нужно сменить тег вопроса на дизайн.

Может быть, пока вам поможет аналогичный вопрос
Как реализовать развёртывание div на всю ширину с переносом соседних блоков?

[JuniorPro]

Ankhena, поправил, чтобы понятнее было, нет, ваш вариант не совсем то, нажатие на div date придает ему класс chosen и создает новый div card привязанный к неделе div week, и вот этот div card уже должен принять свойства, расширяющие его и располагающие под 7-ю div date в том div week, к которому привязан card

[Ankhena]

JuniorPro,

grid div card просто создается как 8-й div и раздвигает 1-й div недели под свою ширину

Так растяните его на всю ширину, а не на одну ячейку.
Где ваш код в песочнице иллюстрирующий проблему?

Со скрином снова какая-то лажа. Нарисовано, что выбрано 12, рядом в коде chosen у 13. Что значит синий блок?

Answer 1

[Ivan Bogachev]

при нажатии на дату в div недели добавляется div card... есть вариант удобнее?

С точки зрения CSS будет практично иметь элементы с одинаковым поведением на одном уровне вложенности в HTML. Например неделя, неделя, неделя, карточка, неделя, неделя... Там все, что есть - обычные блоки на всю ширину. Впихивая карточку внутрь недели и размещая ее на одном уровне с числами, мы усложняем себе жизнь. Числа и карточка - это уже действительно разные вещи.

С точки зрения JS кто-то может сказать, что идеально было бы не смешивать наборы логически разных сущностей на одном уровне. В этом есть смысл. Похожая мысль на поведение в CSS на одном уровне, только сбоку. Можно сделать обертки, чтобы было

неделя
    числа
        день1
        день2
        деньN
    бронирование
неделя
    числа
        день1
        день2
        деньN
    бронирование

При таком подходе на одном уровне будут только недели, на другом - только числа. А посередине - простое разделение компонентов недели на логические части. Это должно быть удобно и с позиции CSS, и из JS. И не нужно будет ничего изобретать.