CSS Grid布局问题：如何垂直对齐列内元素

我要实现一个特殊布局，一开始用Isotope JS没成功，换成CSS Grid后最接近预期效果。现在有7个通过for循环动态生成的元素，要分成3列3行：前两列各放2个元素，最后一列放剩下3个，而且前两列有特殊间距。目前第一列布局已经搞定，但中间列的元素垂直对齐还没实现。

现有尝试代码 #

CSS代码 #

.pr-soft-masonry-layout {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
}

.grid-item-1 {
  grid-row: 1 / 3;
}

.grid-item-2 {
  grid-column: 1 / 2;
  grid-row: 3/-1;
  justify-self: end;
  margin-top: -300px;
}

.grid-item-3 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.grid-item-4 {
  grid-column: 2 / 2;
}

.grid-item-5 {
  grid-row: 1 / 2;
  grid-column: 3 / 3;
}

/* .grid-item-6 {
   grid-row: 3 / -1;
} */

.grid-item-7 {
  grid-column: 3 / 3;
}

.pr-soft-masonry-card {
  /*   height: 280px; */
  padding: 30px;
  border-radius: 30px;
  /*   width: 425px; */
}

.pr-soft-masonry-title {
  font-family: 'Garnett Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 44px;
  line-height: 53px;
}

.pr-soft-masonry-featured-number {
  font-family: 'Garnett Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 90px;
  line-height: 108px;
  margin-bottom: 20px;
}

.pr-soft-masonry-card p {
  font-family: 'Rza';
  font-style: normal;
  font-weight: 505;
  font-size: 20px;
  line-height: 23px;
}

HTML代码 #

<div class="pr-soft-masonry-layout grid">
  <div style="background-color: #FFB79B; width: 427px;" class="pr-soft-masonry-card grid-item-1">
    <div style="#5E3313" class="pr-soft-masonry-title">
      A sneak peak of the data you’ll discover in the study
    </div>
  </div>
  <div style="background-color: #5E3313; width: 312px;" class="pr-soft-masonry-card grid-item-2">
    <div style="color: #FDDAAB" class="pr-soft-masonry-featured-number">
      75%
    </div>
    <p style="color: #FFF;">marks the satisfaction score among professionals who utilize Chat GPT for work</p>
  </div>
  <div style="background-color: #E4E1FD; width: 426px;" class="pr-soft-masonry-card grid-item-3">
    <div style="color: #4C3FD5" class="pr-soft-masonry-featured-number">
      44%
    </div>
    <p style="color: #000;">of PR Pros find the media database to be the most valuable solution</p>
  </div>
  <div style="background-color: #92C34B; width: 426px;" class="pr-soft-masonry-card grid-item-4">
    <div style="color: #E8F5D4" class="pr-soft-masonry-featured-number">
      #1
    </div>
    <p style="color: #FFF;">threat posed by AI according to PR&nbsp;practitioners are manipulation and&nbsp;fake news</p>
  </div>
  <div style="background-color: #FDDAAB; width: 314px;" class="pr-soft-masonry-card grid-item-5">
    <div style="color: #FF7E4D" class="pr-soft-masonry-featured-number">
      #1
    </div>
    <p style="color: #5E3313;">problem: getting journalists to respond</p>
  </div>
  <div style="background-color: #E8F5D4; width: 426px;" class="pr-soft-masonry-card grid-item-6">
    <div style="color: #92C34B" class="pr-soft-masonry-featured-number">
      76%
    </div>
    <p style="color: #000;">foresee critical thinking to be a&nbsp;paramount PR skill for the future</p>
  </div>
  <div style="background-color: #FF7E4D; width: 314px;" class="pr-soft-masonry-card grid-item-7">
    <div style="color: #FDDAAB" class="pr-soft-masonry-featured-number">
      48%
    </div>
    <p style="color: #000;">of PR practitioners struggle with tight budgets</p>
  </div>
</div>

解决方案 #

要实现目标布局，需要调整Grid的行定义和元素的网格定位，去掉硬编码偏移，改用Grid自身规则实现：

调整后的CSS代码 #

.pr-soft-masonry-layout {
  display: grid;
  grid-gap: 20px;
  /* 前两列宽度适配内容，第三列占剩余空间 */
  grid-template-columns: auto auto 1fr;
  /* 三行高度自适应内容 */
  grid-template-rows: auto auto auto;
  /* 元素顶部对齐 */
  align-items: start;
}

/* 第一列第一个元素：跨第1-2行 */
.grid-item-1 {
  grid-row: 1 / 3;
}

/* 第一列第二个元素：第3行，靠右对齐 */
.grid-item-2 {
  grid-column: 1;
  grid-row: 3;
  justify-self: end;
}

/* 第二列第一个元素：第1行 */
.grid-item-3 {
  grid-column: 2;
  grid-row: 1;
}

/* 第二列第二个元素：第3行，与第一列第二个元素垂直对齐 */
.grid-item-4 {
  grid-column: 2;
  grid-row: 3;
}

/* 第三列元素依次排列在3行 */
.grid-item-5 {
  grid-column: 3;
  grid-row: 1;
}

.grid-item-6 {
  grid-column: 3;
  grid-row: 2;
}

.grid-item-7 {
  grid-column: 3;
  grid-row: 3;
}

/* 保留原有卡片样式 */
.pr-soft-masonry-card {
  padding: 30px;
  border-radius: 30px;
}

.pr-soft-masonry-title {
  font-family: 'Garnett Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 44px;
  line-height: 53px;
}

.pr-soft-masonry-featured-number {
  font-family: 'Garnett Medium';
  font-style: normal;
  font-weight: 500;
  font-size: 90px;
  line-height: 108px;
  margin-bottom: 20px;
}

.pr-soft-masonry-card p {
  font-family: 'Rza';
  font-style: normal;
  font-weight: 505;
  font-size: 20px;
  line-height: 23px;
}

关键调整说明 #

• 修改列定义为auto auto 1fr，让前两列宽度匹配内容，第三列自适应剩余空间
• 行定义改为auto auto auto，让行高根据内容自动调整
• 移除grid-item-2的margin-top: -300px，避免硬编码偏移导致的响应式问题
• 给grid-item-4明确指定grid-row:3，实现与grid-item-2的垂直对齐
• 将align-items设为start，保证所有元素顶部对齐，匹配参考图视觉效果

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