레이아웃 만들기 4 숙제 (인스타그램 격자 레이아웃)

미디어 쿼리 부분 질문입니다 

   <div class="grid-container">
      <div class="grid-nav"></div>
      <div class="grid-sidebar"></div>
      <div class="grid-main"></div>
    </div>


 
위에 grid-template-areas 코드를 아래 처럼 작성 해도 되나요?
@media screen and (max-width: 768px) {
        .grid-container {
          grid-template-rows: 100px 100px 400px;
          grid-template-areas:
            '헤더'
            '사이드'
            '내용';
        }
      }

원래 div박스 많았던 거 불필요한 거 삭제하신 거 같은데 이래도 되는(?)지
그리고 헤더 사이드 내용 하나씩만 적어도 괜찮나요? 꼭 4개씩 적어줘야 하는 이유가 있을까요??
-아래 글 미완성인데 실수로 글 올리기가 올라갔는데 삭제하는 방법을 모르겠네요. 중복 질문처럼 지저분해 보이게 해서 죄송합니다-