在CSS网格中选择行

Question

我开始学习CSS网格。但是，如果我有12行和12列，我会尝试研究如何选择2行并将其跨到最后。在这些行中，将放置一个导航链接。

<div class="mainbox">
  <header>
    <nav><a href="#">Home</a></nav>
  </header>
</div>

  {
    ...PageItem,
    path: '/page/item/:id',
  },
  {
    ...Page,
    path: '/page',
  },

Answer 1

.mainbox {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  height: 100vh;
  margin: 10px 0;
}

header {
  grid-row: 1 / 3;  /* new; span across rows 1 & 2 */
  grid-column: 1 / -1;
  background-color: #fff;
}

body {
  padding: 0;
  margin: 0;
  background-color: #5DADE2;
}

<div class="mainbox">
  <header>
    <nav><a href="#">Home</a></nav>
  </header>
</div>