我可以指定某个“网格模板区域”吗？

Question

是否有可能解决某些网格模板区域，或者我必须创建子网格或子Flexbox来实现进一步定位？

例如，在下面的代码示例中，我想将项目放置在三个标题部分的最后一个部分中。什么是最有效的方法？

 .grid-main {
  display: grid;
  height: 98vh;
  width: 98vw;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  grid-template-columns: 175px 1fr 1fr;
  grid-template-rows: 0.1fr 1fr 0.075fr;
  grid-template-areas:
  "header header header"
  "nav main main"
  "footer footer footer";
  animation: fadeIn 2s;
  transition: 1s all ease-in-out;
}

Answer 1

是，可以定义grid-area，也可以定义grid-column或行。

示例

body {
  display: grid;
  height: 98vh;
  width: 98vw;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  grid-template-columns: 175px 1fr 1fr;
  grid-template-rows: 0.1fr 1fr 0.075fr;
  grid-template-areas: "header header header" "nav main main" "footer footer footer";
  animation: fadeIn 2s;
  transition: 1s all ease-in-out;
}

header {
  grid-area: header;
  grid-column: span 2;
  background: cyan
}

p {
  grid-area: header;
  background: tomato;
  grid-column: span 1;
  margin: 0;
}

nav {
  grid-area: nav;
  background: lightgreen
}

footer {
  grid-area: footer;
  background: brown
}

main {
  grid-area: main;
  background: gray;
}

<header>header</header>
<p>something else</p>
<nav>nav</nav>
<main>main</main>
<footer>footer</footer>