我定義了一個(gè)CSS網(wǎng)格來(lái)處理布局:

nav content
nav footer

因此，導(dǎo)航將采取整個(gè)頁(yè)面的高度和給定的寬度，其余的空間將分為:內(nèi)容高度和頁(yè)腳高度。

我定義為:

$nav-width: 8.75rem;
$navbar-height: 6.125rem;
$footer-height: 6.438rem;

.auth-grid {
  display: grid;
  grid-template-rows: 1fr $footer-height;
  grid-template-columns: $nav-width 1fr;
  grid-template-areas: 'nav content' 'nav footer';
}

nav {
  grid-area: nav;
}

main {
  grid-area: content;
}

footer {
  grid-area: footer;
}

然而我得到的是這個(gè)網(wǎng)格:

好像渲染了第三排？我如何用nav填充整個(gè)高度，其余的分成兩列，分別用于內(nèi)容和頁(yè)腳？

我試著復(fù)制你想要的。

body, html {
   height: 100%; 
}

.grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   
   gap: 0px;
   height: 100%;
}
  
#nav {
   height:100%;
   background-color: #DA975D; 
   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 5;
   grid-column-end: 2;  
}

#part1 {

   background-color: #9C55FD; 
   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 3;
   grid-column-end: 6;
}

#part2 {

   background-color: #8FDD77; 
   grid-row-start: 3;
   grid-column-start: 2;

   grid-row-end: 5;
   grid-column-end: 6;
}

<div class="grid">
  <div id="nav">&nbsp;</div>
  <div id="part1">&nbsp;</div>
  <div id="part2">&nbsp;</div>
</div>