如何构建网格布局

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>