CSS网格 - 网格模板区域行为
问题描述:
我有一个网格模板区域定义的CSS网格。有人能告诉我为什么下面的模板不起作用吗?我期望看到等分的4x3网格。我有一个小提琴演示会发生什么,以及为可以工作的网格注释掉样式。我无法破译2之间的区别,以及为什么会出现这种情况。谢谢。 FiddleCSS网格 - 网格模板区域行为
.container {
display: grid;
width: 100%;
height: 100%;
grid-template-areas: "a b c d"
"b c d a"
"a b c d";
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.container > header {
grid-area: a;
}
.container > nav {
grid-area: b;
}
.container > main {
grid-area: c;
}
.container > footer {
grid-area: d;
}
<div class="container">
<header><h1>A</h1></header>
<nav><h1>B</h1></nav>
<main><h1>C</h1></main>
<footer><h1>D</h1></footer>
</div>
答
第二行是 “B)(V d一个” 而不是 “A B C d”。
我想第二行按照这个顺序。我正在寻找12个不同的相等部分。 – noclist