grid 이용시 유동적으로 자동 채우기

grid를 이용할때  lnb width 고정 container width 유동 또는 header, footer height 고정 container height 유동적으로 만들때 쉽게  하는법

// lnb 고정, container 유동
<main class="main">
  <nav class="lnb"></nav>
  
  <div class="container"></div>
</main>

// css
.main {
  display: grid;
  grid-template-columns: auto 1fr;
}

// header, container, footer
<div class="wrap">
  <header></header>
  
  <main></main>
  
  <footer>
</div>

// css
html,
body {
  // 전체높이를 채워줌
  min-height: 100%;
}

.wrap {
  // 전체높이를 채워줌
  min-height: 100%;
  grid-template-rows: auto 1fr auto;
}

grid-template-xxx: auto 대신 고정된 크기라면 해당 크기를 넣어주면 된다
grid-template-xxx 대신 같은 기능을 하는 속성들이 grid에는 여러가지 방법이 있으니 필요한 것으로 사용하면 된다
응용하면 기본 레이아웃 이용시 편하게 쓸 수 있다