使用CSS Grid布局遇.inner-grid下h6与p文本重叠问题求助

问题描述 #

使用CSS Grid实现布局时，.inner-grid容器内的<h6>标题与<p>文本出现重叠现象。

相关代码 #

HTML代码 #

<div class="outer-grid">
  <h2>Title</h2>
  <div class="inner-grid">
    <figure>
        <img src="https://img.icons8.com/ios-glyphs/512/networking-manager.png" alt="" width="34" height="46">
    </figure>

    <h6>QA – – Value Creation for Corporates</h6>
    <p>We supports portfolio management, financial overview, board placement for corporates, commercial collaborations
        and provides early access to follow on rounds and investment opportunities</p>
</div>
  <div class="inner-grid">
    <figure>
        <img src="https://img.icons8.com/ios-glyphs/512/networking-manager.png" alt="" width="34" height="46">
    </figure>

    <h6>QA – – Value Creation for Corporates</h6>
    <p>We supports portfolio management, financial overview, board placement for corporates, commercial collaborations
        and provides early access to follow on rounds and investment opportunities</p>
</div>
</div>

CSS代码 #

.outer-grid{
  max-width: 500px;
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-rows: auto;
}

.outer-grid > h2 {
  grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-column-end: 3;
    text-align: center;
    font-size: 32px;
}

.inner-grid{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
}

.inner-grid > figure{
  height: 60px;
    width: 60px;
    padding: 0 20px 0 0;
}

.inner-grid > h6 {
  grid-row: 1;
    grid-column: 2;
    margin: initial;
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

.inner-grid > p {
  padding-top: 2rem;
    grid-row: 1;
    grid-column: 2;
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

错误原因 #

你给.inner-grid下的<h6>和<p>都设置了grid-row: 1和grid-column: 2，这会强制两个元素放入网格的同一行同一列单元格中，即使给<p>添加padding-top，也只是视觉上偏移，本质仍在同一单元格，空间不足时必然重叠。同时.inner-grid的grid-template-columns: auto未合理分配列宽，也会加剧布局挤压。

解决方法 #

方法1：拆分网格行，让标题和文本分占不同行 #

调整.inner-grid的网格结构，为标题和文本分配独立行：

.inner-grid{
    display: grid;
    grid-template-columns: auto 1fr; /* 第二列占剩余空间，避免文本挤压 */
    grid-template-rows: auto auto; /* 两行分别容纳标题和文本 */
    gap: 0.5rem; /* 可选，增加标题与文本的间距 */
}

.inner-grid > h6 {
  grid-row: 1;
  grid-column: 2;
  /* 保留原有字体样式 */
}

.inner-grid > p {
  grid-row: 2; /* 改为第二行 */
  grid-column: 2;
  padding-top: 0; /* 移除不必要的padding，改用gap控制间距 */
  /* 保留原有字体样式 */
}

方法2：将标题和文本包裹为单个网格项 #

把<h6>和<p>放入同一个容器，作为.inner-grid的一个网格项，让它们在容器内自然流式排列：

<!-- 修改后的.inner-grid结构 -->
<div class="inner-grid">
  <figure>
      <img src="https://img.icons8.com/ios-glyphs/512/networking-manager.png" alt="" width="34" height="46">
  </figure>
  <div class="text-block">
    <h6>QA – – Value Creation for Corporates</h6>
    <p>We supports portfolio management, financial overview, board placement for corporates, commercial collaborations
        and provides early access to follow on rounds and investment opportunities</p>
  </div>
</div>

对应的CSS调整：

.inner-grid{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem; /* 控制图标与文本块的间距 */
}

.inner-grid > .text-block {
  grid-column: 2;
}

.text-block h6 {
  margin-top: 0; /* 移除默认margin，避免额外间距 */
  /* 保留原有字体样式 */
}

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