Исправлено автоматическое увеличение высоты CSS Grid с помощью разборного элемента div

Question

Я делаю 2 столбца с помощью CSS Grid и Collapsible div.Проблема в том, что когда я раскрываю один из разборных элементов div, другой элемент div также будет расширяться за счет пробела.

Кто-нибудь знает, как это исправить, не создавая для двух столбцов div для 2 столбцов?Или используя другой метод вместо CSS-сетки?

снимок экрана css grid со складным div

Answer 1

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

Решение: Flexbox

#grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-around;
    height: max-content;
    flex-flow: row wrap;
    counter-reset: brick;
}


.cell {
    width: 250px;
    flex: 1 0 calc(33.333% - 20px);
    padding: 20px;
    background: #efefef;
}

Пожалуйста, проверьте демонстрацию, которую я создал.https://codepen.io/abhishekrajeshirke/pen/NLzLJJ

Надеюсь, это ответит на ваш вопрос.