我是 css 网格的新手，我正在尝试使用这种布局构建页面:
我遇到的问题是 .main 类和容器网格内的网格。
我认为我在 .main 中对网格的设置有误。
对于上层容器 .container，我可以看到三列布局正在运行。
在第一行，我希望 div 图像 div 跨越三列中的 2 列，而 blogart 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>
-谢谢
问题是您的这部分代码:
.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