CSS Grid技术问题：如何消除相邻段落单元格的grid-row-gap显示

我创建了两列CSS Grid布局，左列放置<h3>标题，右列放置<p>段落文本，设置grid-row-gap在各行间形成合适间距。但当某个标题后存在多个<p>元素时，第二个及后续<p>会自动进入新行，产生额外的grid-row-gap。期望实现如下布局效果：

<h3> | <p>
==========
<h3> | <p>
==========
<h3> | <p>
     | <p>
     | <p>
=========
<h3> | <p>

原代码 #

HTML #

<main>
    <h3>Heading</h3>
    <p>Some text, blah, blah blah</p>

    <h3>Heading</h3>
    <p>Some text, blah, blah blah</p>

    <h3>Heading</h3>
    <p>Some text, blah, blah blah</p>
    <p>Another paragraph of text</p>
    <p>Possibly another paragraph of text</p>

    <h3>Heading</h3>
    <p>Some text, blah, blah blah</p>
</main>

CSS #

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
    grid-row-gap: 60px;
}

p {
   grid-column: 2 / span 1;
   margin-bottom: 0;
   background-color: yellow;
} 

尝试过的调整方案 #

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
    grid-row-gap: 60px;
}

p {
   grid-column: 2 / span 1;
   margin-bottom: 0;
   background-color: yellow;
}

p + p {
  margin-top: -60px;
 }

更优解决方案 #

方案一：调整HTML结构（推荐） #

将同一标题下的所有<p>包裹在一个容器中，让容器作为Grid的右侧项，内部段落自然堆叠，避免Grid自动创建新行产生间隙。

修改后HTML

<main>
    <h3>Heading</h3>
    <p>Some text, blah, blah blah</p>

    <h3>Heading</h3>
    <p>Some text, blah, blah blah</p>

    <h3>Heading</h3>
    <div class="paragraph-group">
        <p>Some text, blah, blah blah</p>
        <p>Another paragraph of text</p>
        <p>Possibly another paragraph of text</p>
    </div>

    <h3>Heading</h3>
    <p>Some text, blah, blah blah</p>
</main>

对应CSS

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 60px;
}

.paragraph-group {
    grid-column: 2 / span 1;
}

p {
    margin-bottom: 1em; /* 保持段落间的自然垂直间距，可按需调整 */
    background-color: yellow;
}

.paragraph-group p:last-child {
    margin-bottom: 0; /* 移除最后一段的底部间距，避免与Grid行间隙叠加 */
}

方案二：不修改HTML，用CSS抵消间隙 #

如果无法调整HTML结构，可通过负margin抵消相邻<p>之间的Grid行间隙，同时添加内边距保证内容不重叠。

CSS代码

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 60px;
}

p {
    grid-column: 2 / span 1;
    margin-bottom: 0;
    background-color: yellow;
}

p + p {
    margin-top: -60px; /* 抵消Grid行间隙 */
    padding-top: 1em; /* 添加顶部内边距，避免段落内容重叠 */
}

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