如何用display: grid实现指定布局？需保留<section>结构

你需要让右侧的"Price summary"卡片（B项）与左侧的"Content A"卡片（A项）水平对齐，同时保持<section>标签独立，这里有个优雅且兼容主流浏览器的方案：

核心思路 #

利用外层Grid的行划分，让右侧容器从第二行开始布局；左侧容器占据全部行，并通过内部Grid管理自身内容，既保留语义化结构，又实现精准对齐。

修改后的CSS代码 #

.card {
  border: 1px solid #E2E3E3;
  border-radius: 4px;
  background-color: #FFF;
  padding: .5rem;
}

.checkout-form {
  padding: 1.5rem;
  background-color: #f9f9f9;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  grid-template-rows: auto auto 1fr; /* 划分三行：文本行、A卡片行、X内容行 */
}

.checkout-form__main {
  grid-row: 1 / -1; /* 左侧容器占据所有行 */
  display: grid;
  gap: 1rem; /* 内部section之间的间距 */
}

.checkout-form__cost {
  grid-row: 2 / -1; /* 右侧容器从第二行开始，与A卡片对齐 */
  align-self: start; /* 确保卡片顶部对齐 */
}

效果说明 #

• 外层Grid通过grid-template-rows划分出对应文本、A卡片、X内容的行区域
• 左侧checkout-form__main占据全部行，内部用Grid管理两个子section，自动适配内容高度
• 右侧checkout-form__cost从第二行开始布局，刚好与左侧的A卡片顶部对齐，完美匹配需求
• 所有主流浏览器（Chrome、Firefox、Safari、Edge）均支持该Grid特性，无需兼容垫片

保留的HTML结构（无需修改） #

<form class="checkout-form">
    <div class="checkout-form__main">
        <section>
            <section>
                <p>Products info</p>
                <article class="card">
                  Content A
                </article>
            </section>
            <section>
                <p>Customer info</p>
                <article class="card">
                  Content X
                </article>
            </section>
        </section>
    </div>
    <div class="checkout-form__cost">
        <section class="card">
           Price summary
        </section>
    </div>
</form>

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