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

Question

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

我遇到的问题是 .main class 和容器网格内的网格。

我想我在 .main 中的网格设置有误。

对于上层容器 .container，我可以看到三列布局有效。

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

第二行应该有三个博文 div，每个都跨越一列。

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

我已经设置了 codepen 非常感谢任何建议。

这是我的标记，css 在代码笔中：

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. Named Areas: the grid-template-areas property

This property specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties.

The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.

All strings must have the same number of columns, or else the declaration is invalid.

If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.

^{(emphasis mine)}

简而言之，您的 .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>

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。您已经限制了每一行的高度；最好允许内容根据需要自动 grow/shrink。
我从内部网格中删除了 grid-template-areas，并从其网格项中删除了 grid-area。这允许它们按照它们出现的顺序自然地布局。默认情况下，每个网格项将填充一个网格单元格。
我向 img 添加了一个 grid-column: span 2，因为您希望它跨越 2 列。

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

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

css grid-template-areas property not aligning grid items

html

css

grid-layout

css-grid

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

css grid-template-areas property not aligning grid items

html

css

grid-layout

css-grid

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