align-items: stretch导致CSS Grid行高异常问题咨询

重现代码 #

CSS 代码 #

* {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px auto;
  align-items: stretch;
}

.sub-grid {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
  font-size: 1.2rem;
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 15px 10px;
}

.sub-grid>.icon {
  grid-row: 1 / span 2;
  width: 45px;
  height: 45px;
}

HTML 代码 #

<div class="grid">
  <div class="sub-grid cell-1"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 1"
/>
    <h2>Heading 1</h2>
    <p>Lorem,
      ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus. </p>
  </div>
  <div class="sub-grid cell-2"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 2"
/>
    <h2>Heading 2</h2>
    <p>Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia. </p>
  </div>
  <div class="sub-grid cell-3"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 3"
/>
    <h2>Heading 3</h2>
    <p>Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum. </p>
  </div>
  <div class="sub-grid cell-4"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 4"
/>
    <h2>Heading 4</h2>
    <p>Vero ipsum sapiente molestias accusamus rerum. Lorem,
      ipsum dolor sit amet consectetur adipisicing elit. </p>
  </div>
  <div class="sub-grid cell-5"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 5"
/>
    <h2>Heading 5</h2>
    <p>Quidem consequatur harum,
      voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus. </p>
  </div>
  <div class="sub-grid cell-6"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 6"
/>
    <h2>Heading 6</h2>
    <p>Pariatur voluptatibus quidem consequatur harum,
      voluptatum mollitia quae </p>
  </div>
</div>

问题现象 #

当.sub-grid内的文本行数不同时（比如第一个.sub-grid的文本是4行，第二个是3行），h2元素下方的间距出现差异，导致第一个.sub-grid里的文本第二行比第二个的略高。设置.grid的align-items: start后，子网格内的行就能对齐一致。

原因解释 #

• align-items: stretch的强制拉伸：外部.grid设置align-items: stretch时，同一网格行里的所有.sub-grid都会被拉到和该行最高的.sub-grid一样高。
• 内部网格的空间分配：.sub-grid本身是网格容器，默认align-content: stretch。当它被强制拉高后，内部的网格项目（图标、标题、文本）之间会自动分配额外的空白空间，这些空间会加到gap或者项目的上下，导致不同.sub-grid里的文本行位置错位。
• align-items: start的修正作用：改成align-items: start后，每个.sub-grid的高度只由自身内容决定，不会被强制拉伸。内部网格没有多余空间需要分配，所有.sub-grid里的标题和文本都会从顶部开始排列，自然就能保持行对齐一致。

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