Question

我是css网格的新手，我正在尝试使用这种布局构建一个页面：

我遇到的问题是.main类和容器网格中的网格。

我认为.main中的网格设置错误。

对于上部容器.container，我可以看到三列布局正在运行。

在第一行，我希望div图像div跨越三列中的两列，而blogart div则占据一列。

第二行应该有三个blogart div，每个divs一行。

但是在内部网格.main中，所有标记都在第四列中。

我已为codepen设置了一个很棒的建议。

这是我的标记，css在codepen中：

＆＃13;

body {
  padding-top: 20px;
  background: #f5f7f8;
}

.container{
  display: grid;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px 180px 80px;
  grid-gap: 20px;
  
  grid-template-areas: "header   header   header"
                       "main     main     main"
                       "footer   footer   footer";
}

.container div{
  color: white;
  font-size: 20px;
  padding: 20px;
}

.header {
  background: #b03532;
  grid-area: header;
}

.main {
  background: #33a8a5;
  grid-area: main;
  
  display: grid;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
  
  grid-template-areas: "bigimg bigimg blogart"
                       "blogart blogart blogart";
  
}

.bigimg {
  background: #da6f2b;
  grid-area: bigimg;
}

.blogart {
  background: #3d8bb1;
  grid-area: blogart;
}

.footer {
  background: #6a478f;
  grid-area: footer;
}

＆＃13;

<section class="container">
  <div class="header">Header</div>

  <div class="main">
    <div class="bigimg">img</div>
    <div class="blogart">blogart</div>
    <div class="blogart">blogart</div>
    <div class="blogart">blogart</div>
    <div class="blogart">blogart</div>
  </div>

  <div class="footer">footer</div>
</section>

＆＃13;

-Thanks

Answer 1

问题在于您的代码的这一部分：

.main {
  grid-template-areas: "bigimg  bigimg  blogart"
                       "blogart blogart blogart";
}

布局无效。

来自规范：

7.3. Named Areas: the grid-template-areas property

此属性指定 命名的网格区域 ，但不是   与任何特定网格项相关联，但可以从中引用   网格放置属性。

grid-template-areas属性的语法也提供了一个   可视化网格结构，使整体布局   网格容器更容易理解。

所有字符串必须具有相同的列数，否则声明无效。

如果命名网格区域跨越多个网格单元格，但这些单元格不形成单个填充矩形，则声明无效。

注意：此模块的未来版本可能允许使用非矩形或断开连接的区域。

^{（强调我的）}

简而言之，您的.blogart可视化是L形的，而不是矩形，因此它不起作用。

这不是您的.container可视化问题，它可以正常工作：

.container {
  grid-template-areas: "header   header   header"
                       "main     main     main"
                       "footer   footer   footer";
}

要使布局工作，请考虑在网格项上使用grid-column和grid-row。这是一个粗略的草图，基于您的演示：

＆＃13;

body {
  padding-top: 20px;
  background: #f5f7f8;
}
.container{
  display: grid;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px 180px 80px;
  grid-gap: 20px;
  grid-template-areas: "header   header   header"
                       "main     main     main"
                       "footer   footer   footer";
}
.container div {
  color: white;
  font-size: 20px;
  padding: 20px;
}
.header {
  background: #b03532;
  grid-area: header;
}
.main {
  background: #33a8a5;
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
  /* grid-template-areas: "bigimg bigimg blogart"
                       "blogart blogart blogart"; */
  
}
.bigimg {
  grid-column: 1 / 3;
  background: #da6f2b;
  /* grid-area: bigimg; */
}
.blogart:nth-child(2) {
  grid-column: 3 / 4;
  background: #3d8bb1;
  /* grid-area: blogart; */
}
.blogart:not(:nth-child(2)) {
  grid-column: auto / span 1;
  grid-row: 2;
  background: orange;
  /* grid-area: blogart; */
}

.footer {
  background: #6a478f;
  grid-area: footer;
}

＆＃13;

<section class="container">
  <div class="header">Header</div>
  <div class="main">
    <div class="bigimg">img</div>
    <div class="blogart">blogart</div>
    <div class="blogart">blogart</div>
    <div class="blogart">blogart</div>
    <div class="blogart">blogart</div>
  </div>
  <div class="footer">footer</div>
</section>

＆＃13;

revised codepen

Answer 2

您正尝试将多个网格区域命名为“blogart”，但这无效。您不能使用相同名称命名多个网格区域。

除了使用命名模板区域外，还有几种定义网格的方法。您可能希望依赖网格自动放置算法，而不是在内部网格中使用grid-template-areas。

尝试这样的事情：

.main {
  background: #33a8a5;
  grid-area: main;

  display: grid;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

然后，网格中的每个网格项将自动布局，每个网格单元格一个，用于三列，直到它们全部放置。

修改的

这是一个更完整的演示：https://codepen.io/keithjgrant/pen/JNGNKX

我做了一些改动：

我从外部网格中删除了grid-template-rows。你限制了每排的高度;最好是允许内容根据需要自动增长/缩小。
我从内部网格中删除了grid-template-areas，从网格项中删除了grid-area。这允许它们按照它们出现的顺序自然地布局。默认情况下，每个网格项将填充一个网格单元格。
我在img中添加了grid-column: span 2，因为您希望它跨越2列。

玩弄它。请注意，您现在可以添加（或删除）所需的“blogart”元素，并且布局仍然有效。

css grid-template-areas属性未对齐网格项

2 个答案: