如何构建网格布局

Question

所以我在使用以下 CSS 时遇到了问题：

const Content = styled("div")`
  grid-area: main;
  background-color: white;
  margin-top: 5px;
  margin-left: 20px;
  margin-right: 20px;
  display: grid;
  grid-template-areas:
    "contentHeader contentHeader contentHeader"
    "contentItem   contentItem   contentItem"
    "contentItem   contentItem   contentItem";
  /* grid-template-columns: 1fr; */
  /* grid-auto-columns: 33px;
  grid-auto-rows: 150px; */
  grid-gap: 10px;
`;

const ContentHeader = styled("h1")`
  grid-area: contentHeader;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  line-height: 40px;
  color: black;
`;

const ContentMain = styled("div")`
  grid-column: 1fr;
  grid-row: 1fr;
  background-color: red;
`;

我的目标是在左上角有一个标题，然后是两行的布局。

第一行有两列，第一项大于第二项。第二行将有一项填满两列。

相反，我得到了这个：

我知道问题可能出在我的grid-column 行中，但如果有人能指出我正确的方向，那就太好了。另外，我不明白为什么我的标题和彩色网格项目之间有很大的差距？

谢谢！

Answer 1

您需要在模板区域中为每个内容项命名： 例如：

grid-template-areas:
    "contentHeader contentHeader contentHeader"
    "contentItem1   contentItem1   contentItem2"
    "contentItem3   contentItem3   contentItem3";

然后在您的 contentItem1 中将其添加到 css：

grid-area: contentItem1

在 contentItem2 div 中将这个添加到 css：

grid-area: contentItem2

最后在 contentItem3 中添加到 css 中：

grid-area: contentItem3

这是仅 css 的演示：

.grid {
  display: grid;
  grid-template-areas: "contentHeader contentHeader contentHeader" "contentItem1   contentItem1   contentItem2" "contentItem3   contentItem3   contentItem3";
  grid-gap: 10px
}

.header {
  grid-area: contentHeader;
  background-color: red;
  height: 50px
}

.item1 {
  grid-area: contentItem1;
  background-color: blue;
  height: 150px;
}

.item2 {
  grid-area: contentItem2;
  background-color: green;
  height: 150px;
}

.item3 {
  grid-area: contentItem3;
  background-color: yellowgreen;
  height: 150px;
}

<div class="grid">
  <div class="header"></div>
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>