如何构建网格布局

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;
`;

我的目标是左上角有 header 的布局，然后是两行。

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

相反，我得到了这个：

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

谢谢！

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>

如何构建网格布局

How to structure a grid layout

css

emotion

css-grid

css-in-js