使用CSS Grid还原网页设计遇阻，求解决方案

我正尝试还原Frontend Mentor上的一款四卡片布局设计。最初打算把页面卡片区域拆成6x4的CSS Grid，但目前布局不符合预期，行列显示异常。试过在无内容区域添加占位行，也没有效果。

我的代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Four Card Feature Section</title>
    <link rel="stylesheet" href="styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <main role="landing-page">
      <section class="heading">
        <header class="text">
          <h1 class="title-text">Reliable, efficient delivery <br> Powered by technology </h1>
          <p class="subtitle-text">Our Artificial Intelligence powered tools use millions of project data <br> points to ensure that your project is successful </p>
        </header>
      </section>
      <div class="grid-container">
        <!--Column 1 -->
        <div class="column column-left">
          <h2 class="title-card">Supervisor</h2>
          <p class="subtitle-card">Monitors activity to identify project <br> roadblocks </p>
          <img src="icon-supervisor.svg" class="icon" alt="supervisor-icon" />
        </div>
        <!--Column 2 -->
        <div class="column column-middle-a">
          <h2 class="title-card">Team Builder</h2>
          <p class="subtitle-card">Scans our talent network to create the <br> optimal team for your project </p>
          <img src="icon-team-builder.svg" class="icon" alt="teambuilder-icon" />
        </div>
        <div class="column column-middle-b">
          <h2 class="title-card">Karma</h2>
          <p class="subtitle-card">Regularly evaluates our talent to ensure <br> quality </p>
          <img src="icon-karma.svg" class="icon" alt="karma-icon" />
        </div>
        <!--Column 3-->
        <div class="column column-right">
          <h2 class="title-card">Calculator</h2>
          <p class="subtitle-card">Uses data from past projects to provide <br> better delivery estimates </p>
          <img src="icon-calculator.svg" class="icon" alt="calculator-icon" />
        </div>
      </div>
    </main>
  </body>
</html>

CSS代码 #

* {
    border: 1px solid black;
}

:root {
--gray-text: #696969;
--dark-text: #171717;
}

.column .icon {
    right: -15em;
    position: relative;
}

.heading {
    text-align: center;
    align-content: auto;
    font-family: David;
}

.title-text {
    color: var(--dark-text);
}

.subtitle-text {
    color: var(--gray-text);
}

.column .subtitle-card {
    color: var(--gray-text);
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  padding: 20em;
}

/*
.empty-row-1 {
    grid-column: 1 / 2;
    grid-row: 1;
}

.empty-row-2 {
    grid-column: 1 / 2;
    grid-row: 4;
}

.empty-row-3 {
    grid-column: 5 / 6;
    grid-row: 1;
} 

.empty-row-4 {
    grid-column: 5 / 6;
    grid-row: 4;
}
*/

.column-left {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    text-align: left;
}

.column-middle-a {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    text-align: left;
}

.column-middle-b {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    text-align: left;
}

.column-right {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
    text-align: left;
}

补充说明 #

• 占位行代码已注释并从HTML中移除，占位行代码为：<div class="empty-row-x"></div>，添加后无效果
• 给所有元素添加了1px边框用于调试布局，非最终效果

我感觉当前的Grid方案不是最优解，在第1和第3列设置“浮动”行的方式很别扭，也没找到相关示例，恳请帮助！

不用搞6列这么复杂，这个经典的十字形卡片布局，用3列CSS Grid就能轻松实现，核心是让左右两张卡片跨两行，中间两张各占一行，再通过align-self实现垂直居中。

核心修改代码 #

.grid-container {
  display: grid;
  /* 3列等分宽度，fr单位适配不同屏幕 */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* 替换超大的20em padding，改用合理的边距 */
  padding: 2rem 5%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 左侧卡片跨第1-3行，垂直居中对齐 */
.column-left {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}

.column-middle-a {
  grid-column: 2;
  grid-row: 1;
}

.column-middle-b {
  grid-column: 2;
  grid-row: 2;
}

/* 右侧卡片跨第1-3行，垂直居中对齐 */
.column-right {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
}

/* 卡片内部布局优化：图标靠右靠下 */
.column {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.column .icon {
  align-self: flex-end;
  margin-top: auto; /* 让图标自动靠下 */
}

方案优势 #

1. 逻辑匹配视觉结构：3列正好对应左、中、右三组卡片，无需额外占位元素
2. 代码简洁易维护：利用Grid跨行列特性直接实现布局，不用冗余的空div
3. 响应式友好：移动端只需把grid-template-columns改成1fr，即可自动切换为单列布局
4. 图标位置稳定：用flex布局实现图标靠右靠下，比负相对定位更可靠，不会破坏布局

另外，你之前设置的padding:20em会导致网格区域过大，换成百分比或rem单位更符合响应式设计；全局调试边框可在上线前移除。

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