如何布局此 CSS 网格模板

Question

我想使用 CSS 网格以如下方式显示此页面：

我知道这里只有 3 个 div，但我想要一个开始。你如何让 div 2 和 div 3 位于第二行和第 2 列和第 3 列。我需要总共 4 列还是 3 列？

到目前为止我得到了什么：

.grid{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 50px;
    box-sizing: border-box;
 
}
 .feature-one{
        grid-template-columns: 1/2;
    
  }
  .feature-two{
    grid-column: 3/6;
    grid-row: 2;
}
.feature-three{
    grid-column: 3/6;
    grid-row: 2;
}

这是我所拥有的结果：

Answer 1

这是你要找的吗？

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 30vw);
      grid-template-rows: 100px 100px;
      grid-gap: 13px;
      padding: 2px;
    }

    .grid-container>div {
      background-color: aqua;
      text-align: center;
      font-size: 15px;
    }

    .the-feed {
      grid-area: 1 / 1 / 3 / 1;
    }

  <div class="grid-container">
    <div class="the-feed">The Feed</div>
    <div class="">Contact Lifecycle</div>
    <div class="">Custom Fields</div>
    <div class="">Custom Sales Activities</div>
    <div class="">Multi-Currency</div>
  </div>

您的布局是跨越整个屏幕宽度的 3 列。您可以像这样定义列：

  grid-template-columns: repeat(3, 30vw);
  

另外还有两排等高。您可以像这样定义行：

grid-template-rows: 100px 100px;

（如果您希望第二行高于第一行，您可以将上面的代码修改为：grid-template-rows: 100px 150px;）

然后，要使最大的 div 跨越两行，你有这行：

.the-feed {
  grid-area: 1 / 1 / 3 / 1;
}

上面的语法一开始可能很难解析。这意味着在 gridline-row 1 和 gridline-column 1（例如 1/1）处开始 div。并在 gridline-row 3 和 gridline-column 1 结束 div（例如 3/1）。

请注意，网格线是列和行之间的线。它们不是实际的列和/或行。至此，井字游戏 CSS 网格有 3 行和 3 列。但它有 4 行网格线和 4 列网格线。见Why are CSS Grid-Area ending coordinates offset?