带repeat auto-fit的密集网格布局实现响应式居中

我有一个响应式网格，每个item都有默认隐藏的details区域，点击item会给details添加类以显示它。HTML/CSS代码大致如下：

<div class="grid">
    <div class="item">Item 1</div>
    <div class="details">Item 1 Details</div>

    <!-- ... -->

    <div class="item">Item n</div>
    <div class="details">Item n Details</div>
</div>

.grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.item {
    /* nothing relevant */
}

.details {
    grid-column: 1 / -1;
    max-height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}

.details.selected {    
    max-height: unset;
    padding: 1rem 2rem;
    opacity: 1;
}

details区域占满整行，dense自动流可让其他item填充空隙，item数量足够多时效果良好。但假设容器宽度为1000px（可并排显示5个item），若只有1-2个item，其右侧会有大量空白，我希望居中这些item，但当前CSS中grid-column:1/-1导致网格填充空单元格，无法实现居中。当item数量超过5个时的显示效果符合预期，也接受底部行居中的flex方案。请问如何实现该效果？不局限于grid，也可使用flex或其他方案，只要能实现dense特性。

附加需求（非当前重点）：我希望给details添加淡入淡出效果，因此使用padding、max-height和opacity而非display:none，但当选中同排的另一个item时，两个details容器会在过渡期间同时显示，导致网格布局出现异常偏移，允许使用JS解决方案。

一、少数量Item居中+保留Dense布局 #

核心思路是给每个Item和对应的Details套一层容器，让Grid将这个容器作为单个单元格，既保留dense自动流特性，又能让Item在单元格内居中：

修改后的HTML结构 #

<div class="grid">
    <div class="item-wrapper">
        <div class="item">Item 1</div>
        <div class="details">Item 1 Details</div>
    </div>

    <!-- ... -->

    <div class="item-wrapper">
        <div class="item">Item n</div>
        <div class="details">Item n Details</div>
    </div>
</div>

调整后的CSS #

.grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem; /* 可选，增加元素间距 */
}

.item-wrapper {
    /* 让Item在单元格内水平居中 */
    display: flex;
    justify-content: center;
}

.item {
    /* 固定Item宽度，避免被单元格拉伸 */
    width: 180px;
    cursor: pointer; /* 增加点击提示 */
}

.details {
    grid-column: 1 / -1;
    max-height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease; /* 统一过渡动画 */
}

.details.selected {    
    max-height: 500px; /* 用足够大的固定值替代unset，保证过渡生效 */
    padding: 1rem 2rem;
    opacity: 1;
}

这个方案中，不管Item数量多少，单个Item都会在自己的网格单元格内居中，视觉上达到整体居中的效果；同时Grid的dense流依然能正常填充空隙，满足多Item时的布局需求。

二、解决过渡期间布局偏移的JS方案 #

切换同排Item的Details时，先移除旧Details的选中状态，等待过渡结束后再激活新的Details，避免两个Details同时占用空间：

const items = document.querySelectorAll('.item');
let activeDetails = null;
const transitionDuration = 300; // 和CSS中transition时长保持一致

items.forEach(item => {
    item.addEventListener('click', () => {
        const targetDetails = item.nextElementSibling;
        
        // 点击同一个Item，直接切换状态
        if (activeDetails === targetDetails) {
            targetDetails.classList.toggle('selected');
            activeDetails = targetDetails.classList.contains('selected') ? targetDetails : null;
            return;
        }

        // 先关闭旧的Details，等待过渡完成后再打开新的
        if (activeDetails) {
            activeDetails.classList.remove('selected');
            setTimeout(() => {
                targetDetails.classList.add('selected');
                activeDetails = targetDetails;
            }, transitionDuration);
        } else {
            // 无活跃Details，直接打开当前的
            targetDetails.classList.add('selected');
            activeDetails = targetDetails;
        }
    });
});

内容的提问来源于stack exchange，提问作者Somebody