Я пытаюсь применить липкую позицию к макету сетки

Question

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

При взгляде по сторонам мне кажется, что лучше всего использовать позицию: липкая с вершиной: 0px. Однако это работает только до тех пор, пока нижний ряд не будет прокручиваться за пределы экрана. Как только это прокручивается, оно также занимает верхний ряд. Если я применю одни и те же атрибуты ко всей второй сетке, то это сработает, но у меня появятся как верхнее, так и нижнее поля на экране.

CSS

  display: grid;
  grid-template-rows: auto 1000px;
  grid-template-areas: "top" "bottom";
}

#a {
  grid-area: top;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas: "topa" "topb";
}
#aa{
  grid-area: topa;
  background: blue;
  color: white;
  top: 0px;
  position: sticky;
}
#ab{
  grid-area: topb;
  background: red;
  color: white;
}

#b {
  grid-area: bottom;
  background: grey;
}

HTML

<div class="ctnr">
  <div id='a'>
  <div id='aa'>First Line</div>
  <div id='ab'>Second Line</div>
  </div>
  <div id='b'>nav</div>
</div>

Рабочий пример проблемы: https://jsfiddle.net/ydg46cqh/