两列网格布局下手风琴展开时如何让下方div自动向下位移？

方案一：单网格容器布局 #

• 每个手风琴的触发按钮和对应的内容区域必须作为一个独立的整体单元，内部使用正常块级垂直排布，不要将所有按钮、所有内容分别拆分到不同的容器中。
• 外层容器设置2列网格属性时，新增grid-auto-rows: min-content配置，保证每行高度自动适配当前行内最高的子元素高度，不要设置固定行高或者限制行高的规则。
• 排查手风琴内容区域的定位属性，不要使用position: absolute、position: fixed这类脱离文档流的配置，保证内容展开后的高度变化能被父容器正常感知。

方案二：双列独立容器布局 #

• 将手风琴单元平均拆分为两组，分别放入左、右两个独立的列容器内，两个列容器通过flex或grid横向排列，均分总宽度。
• 每个列容器内部使用常规块级布局纵向排列手风琴单元，单个手风琴展开时只会推动当前列下方的单元下移，不会影响另一列的元素位置。
• 两种方案都需要避免给手风琴单元、内容区域设置固定高度，也不要配置不合理的overflow: hidden属性截断超出的内容。

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