是否可以动态地将卡片项目排列到顶部？

Question

var size = document.getElementsByClassName("info-box");

for (const key in size) {
    if (size.hasOwnProperty(key)) {
        const element = size[key];
        element.addEventListener('click', (function () {
            return select(element);
        }), false);
    }
}

function select(element) {
    element.classList.toggle("selected");
}

* {
    box-sizing: border-box;
}
main {
    background-color: #121212;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 30px;
    
}

.info-box {
    /* Design */
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.62);

    /* Flex Layout */
    width: 250px;
    height: 250px;
    
    /* Content */
    padding: 20px;
    overflow: hidden;

    transition: 1s;
    
}

.info-box.selected{
    width: 510px;
    height: 510px;  

}

    <main>
        <div class="info-box selected"></div>
        <div class="info-box"></div>
        <div class="info-box"></div>
        <div class="info-box"></div>
        <div class="info-box"></div>
        <div class="info-box"></div>
    </main>

我正在尝试构建允许任意数量的卡牌布局。 这些卡均具有固定的宽度和高度。按下臀部时，卡片的高度和宽度应能增加一倍。这个过渡是动画的。 我尝试使用flexbox构建此布局，但是卡在我的网格中留下了空白。卡应填满 调整其中一张卡片的尺寸时会出现这些间隙。