CSS Grid布局问题：右侧展开的Accordion影响左侧元素位置

用Tailwind CSS实现左右等宽的折叠面板布局时，右侧面板展开后会导致左侧面板位置偏移，核心原因是Grid布局默认的align-items: stretch会让行内所有列的高度同步拉伸。

修复方案 #

给外层Grid容器添加items-start类，让每列内容从行顶部对齐，避免被其他列的高度变化影响：

修改后的代码 #

<div className="w-full lg:w-10/12 grid grid-cols-1 lg:grid-cols-2 gap-4 mx-auto items-start">
  <div>
    {/* 左侧面板 */}
    <Accordion className="rounded-3xl shadow-2xl bg-rb-light-200">
      <AccordionSummary>
        <span className="text-primary text-left font-semibold text-2xl">
          问题内容
        </span>
      </AccordionSummary>
      <AccordionDetails className="w-11/12 text-xl text-left text-rb-dark-100">
        <span>回答内容</span>
      </AccordionDetails>
    </Accordion>
  </div>
  <div>
    {/* 右侧面板 */}
    <Accordion className="rounded-3xl shadow-2xl bg-rb-light-200">
      <AccordionSummary>
        <span className="text-primary text-left font-semibold text-2xl">
          问题内容
        </span>
      </AccordionSummary>
      <AccordionDetails className="w-11/12 text-xl text-left text-rb-dark-100">
        <span>回答内容</span>
      </AccordionDetails>
    </Accordion>
  </div>
</div>

原理说明 #

Tailwind的items-start对应CSS的align-items: flex-start，设置后Grid列中的内容会保持自身高度，不会被强制拉伸到和同列其他元素一致，这样右侧折叠面板展开时，左侧面板的位置和高度都不会被干扰。

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