CSS grid with sticky nav

Question

I am stuck with CSS grids

I want to make a webpage, that has

• a sticky nav (with top: 15px; )
• full screen "scenes" (they take up the remaining space under the nav).

So the height of the nav and the content should be 100vh

At every scene, the top ~10% is the nav and the rest is the content

Here is a blueprint

Answer 1

If any1 watches this in the future

main
    display: grid
    grid-template-rows: auto // height of nav
    grid-auto-rows: 100vh // fullscreen scenes

On sticky nav

main
   // all props from above
   --nav-position-top: 15px
   padding-top: var(--nav-position-top)
nav
   position: sticky
   top: var(--nav-position-top)