angualr css grid 显示问题

[Lukedis]

body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(15, 1fr);
  gap: 0 0;
}

header {
  grid-area: 1 / 1 / 2 / 13;
  width: 100%;
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 70px;
  grid-template-areas: ". home notes group . search search . . login signup .";
}

但是 header 元素堆积在一个格子里面，我希望 header 元素占据第一行

[Hanggi]

https://tburleson-layouts-demos.firebaseapp.com/#/docs

[nzbin]

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

[Lukedis]

@nzbin 没有看到 grid 里面嵌套 grid 的例子