Выбор строк в сетке CSS

Question

Я начинаю изучать CSS сетку.Тем не менее, я пытаюсь исследовать, как выбрать 2 строки и разбить их до конца, если у меня есть 12 строк и 12 столбцов.В этих строках я собираюсь поставить навигационную ссылку.

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>