如何阻止CSS Grid中项目随其他项展开同步增高？

问题现象 #

将多个手风琴组件通过两列CSS Grid布局排列后，展开任意一个手风琴查看内容时，同一行的相邻手风琴会被同步拉高，破坏原有布局效果。

问题原因 #

CSS Grid的默认规则是让同一行内所有网格项的高度保持一致，当某一个手风琴展开后高度增加，Grid会自动拉伸该行内的其他网格项，使其高度与最高项匹配，从而出现同步增高的现象。

解决方案 #

方案1：阻止网格项被强制拉伸 #

给每个手风琴容器添加align-self: start属性，让网格项基于自身内容高度渲染，不被Grid强制拉伸：

.accordion{
    padding: 1.3em;
    margin-bottom: 1em;
    align-self: start; /* 新增属性 */
}

或者直接在Grid容器上全局设置align-items: start，让所有网格项都采用自对齐：

.colour-and-mood .container div:nth-of-type(1){
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    align-items: start; /* 新增属性 */
}

方案2：优化手风琴布局结构（可选） #

现有代码中使用浮动实现标题与展开按钮的排列，可能会干扰Grid的高度计算。可以改用Flex布局替代浮动，减少布局冲突：

/* 替换原浮动布局，用Flex实现标题与按钮的横向排列 */
.accordion > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* 调整复选框和按钮的定位，移除浮动相关样式 */
.accordion input{
    width: 2em;
    height: 2em;
    opacity: 0;
    z-index: 2;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.accordion div div:nth-of-type(1){
    z-index: 1;
}

修改后的完整代码示例 #

HTML（结构保持不变） #

<div class="accordion">
    <div>
        <h3>Empowered</h3>
        <input type="checkbox" aria-hidden="true"/>

        <div>
            <span></span>
            <span></span>
        </div>

        <div class="accordion-content">
            <h4>Red</h4>
            <p>Red is a warm colour that is often said to make you feel empowered and invigorated. It is quite a bold colour that can become overpowering if used in excess. Red is therefore best used as an accent colour.</p>
        </div>

    </div>
</div>

CSS（添加防拉伸属性） #

.accordion{
    padding: 1.3em;
    margin-bottom: 1em;
    align-self: start; /* 新增防拉伸属性 */
}

.accordion:last-child{
    margin-bottom: 0;
}
/* 生成+符号的span样式 */
.accordion span{
    display: block;
    width: 1.5em;
    height: .2em;
    background-color: var(--navy);
}

/* 旋转其中一个span形成+号 */
.accordion span:nth-of-type(1){
    transform: rotate(90deg) translate( 2px, 2px);
    position: relative;
    left: .08em;
    top: .08em;
}
/* 作为点击触发器的隐藏复选框 */
.accordion input{
    display: block;
    width: 2em;
    height: 2em;
    float: right;
    clear: right;
    margin-top: -1.8em;
    opacity: 0;
    z-index: 2;
}
/* 调整+号按钮的位置 */
.accordion div div:nth-of-type(1){
    float: right;
    margin-right: -1.9em;
    margin-top: -1.1em;
    z-index: 1;
}

.accordion h4{
    clear: right;
}

.accordion-content{
    display: none;
}

.accordion input:checked ~ .accordion-content{ 
display: initial;
}

响应式Grid布局代码（添加全局防拉伸） #

.colour-and-mood .container div:nth-of-type(1){
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    align-items: start; /* 新增全局防拉伸属性 */
}

/* 保持span的块级显示 */
.colour-and-mood .container div:nth-of-type(1) div:nth-of-type(1){
    display: block;
}

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