Как сделать так, чтобы расширяющаяся карточка в сетке влияла только на макет ее собственного столбца, а не на все [дубли ⇐ CSS

[Anonymous]

Используя CSS Grid, я получил двукратную сетку карточек, которую можно расширять. Моя проблема в том, что когда кто-то расширяется, он толкает все карты под ним вниз в обоих столбцах. Я хочу, чтобы карты под ним в том же столбце были опущены вниз. Масонство не решает эту проблему, поскольку, когда карта расширяется, она все равно смещает каждый столбец вниз. У кого-нибудь есть совет? Спасибо


.provider_list {
height: 80vh;
overflow: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
}

.card {
height: 12em;
border: 1px solid gray;
border-radius: .7em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
overflow: hidden;
transition: all 0.5s ease;
width: 28em;
margin: 0 auto;
margin-bottom: 1.2em;
}


function expandCard(button) {
let card = button.parentElement;
if (card.style.height == '30em') {
card.style.height = '12em';
button.innerHTML = 'More Details'
} else {
button.innerHTML = 'Hide Details'
card.style.height = '30em';
}
}


@if(count($providers) > 0)

Provider Count: {{ $provider_count }}

@foreach ($providers as $index => $provider)

@endforeach
@if(!$hit_query_total)

Load More

Searching...


@endif


@else
No Providers..
@endif





Name: {{ $lname }}, {{$fname}}
NPI: {{ $npi }}

Here is some additional information that will be shown when the card expands. You can put more details or any other content here.

More Details



Подробнее здесь: https://stackoverflow.com/questions/791 ... -own-colum