如何构造网格布局

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