html - 在 CSS 网格中选择行

Question

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

body,
html {
  padding: 0;
  margin: 0;
  background-color: #5DADE2;
  height: 100%;
}

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

header {
  grid-column: 1 / -1;
  background-color: #fff;
}

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

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>