CSS – переход по столбцам сетки-шаблона от значения px ⇐ CSS

[Anonymous]

У меня есть этот фрагмент HTML/CSS:

Код: Выделить всё

.test123 {
grid-template-columns: 255px 255px;
transition: 200ms;
display: grid;
gap: 30px;
.card {
border-radius: 50px;
border: 1px solid #BBD0FB;
}
.c1 {
background-color: red;
width: 100%;
height: 100px;
}
.c2 {
background-color: blue;
width: 100%;
height: 100px;
}
}
.test123:has(:nth-child(1):hover) {
grid-template-columns: 1fr 255px;
}
.test123:has(:nth-child(2):hover) {
grid-template-columns: 255px 1fr;
}

Код: Выделить всё

Я хочу, чтобы синяя и красная карточки имели некоторый переход при наведении на них курсора , чтобы они плавно росли и сжимались.
Я пытался разрешить переходное поведение: разрешить-дискретный, но это не помогло, поэтому я как бы застрял в этой проблеме .
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/791 ... o-px-value