在单个CSS网格行上设置高度值

我有一个CSS网格布局,我使用该grid-column属性跨越整个网格的顶行.

有谁知道如何将此行设置为100px高并将所有后续行设置为grid-auto-rows200px 的高度？

我知道我可以输入grid-template-rows所有特定行的单个值,但页面上会有很多div,并且不想输入100px,然后使用此grid-template-rows属性输入200px的值.

我认为必须有一种方法可以在某些行上设置单个像素值,然后将其他所有内容设置为grid-auto-rows？

我似乎无法在文档中找到如何做到这一点.

任何帮助都是极好的!

https://codepen.io/emilychews/pen/dZPJGQ

.gridwrapper {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  grid-auto-rows: 200px;
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
}

nav {
  background: yellow;
}

.gridwrapper div {
  padding: 1em;
  background: red;
  color: white;
  box-sizing: border-box;
}

.gridwrapper div:nth-child(odd) {
  background: blue;
}

nav {
  grid-column: 1 / -1;
}

/*MAKE DIVS 1FR ON MOBILE*/
@media only screen and (max-width: 736px) {
  .gridwrapper {
    grid-template-columns: 1fr;
  }
}

  
  
2
  
3
  
4
  
5
  
6

.gridwrapper{
    display: grid;
    grid-template-rows: 100px; /* top row is 100px in height */
    grid-auto-rows: 200px;     /* any new rows created are 200px in height */
}