Как лучше отобразить создаваемый нажатием 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