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

Question

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

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

我想我的网格设置错误了.main.

对于上层容器.container,我可以看到三列布局正在工作.

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

第二行应该有三个blogart div,每个divs一个列.

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

我已经设置了一个codepen非常适合任何建议.

这是我的标记,css在codepen中:

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

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

-谢谢

Answer 1

问题是你的代码的这一部分:

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

布局无效.

从规格:

7.3.命名区域:grid-template-areas 财产

此属性指定命名网格区域,这些区域不与任何特定网格项关联,但可以从网格布局属性中引用.

该grid-template-areas属性的语法还提供了网格结构的可视化,使网格容器的整体布局更容易理解.

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

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

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

^{(强调我的)}

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

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

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

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

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

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

修改后的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网格项目中删除了。这使它们能够按照出现的顺序自然地布置。默认情况下，每个网格项将填充一个网格单元格。
• 我grid-column: span 2在 img 中添加了 a ，因为您希望它跨越 2 列。

玩那个。请注意，您现在可以添加（或删除）任意数量的“blogart”元素，并且布局仍然有效。