header
header { grid-area: header; }
Article

grid-template-areas: 속성은 이름붙은 그리드 영역을 지정하여 그리드에 셀을 할당한다. 그리드로 이뤄진 전체 셀을 채워야 하며, 여러 셀을 합칠 때는; 해당 이름을 반복하여 적어주면 된다:

1) grid-template-areas: 속성을 사용하여 항목 이름을 써서 그리드 영역을 정의해준다

2) article { grid-area: article; } 속성을 사용하여 그리드 컨테이너의 바로 아래 하위요소 항목들에 이름을 지정해준다 

    
        body { max-width: 1024px; margin: 0 auto; }

        .grid-container {
            display: grid;
            grid-template-columns: 1fr 3fr; /* 1:3 비율의 2컬럼 */
            gap: 1px;
    
            /* grid-template-areas 속성을 사용하여 항목 이름을 써서 그리드 영역을 정의해준다 */
            grid-template-areas:
                "header header"
                "sidebar article"
                "footer footer"; /* 각각의 따옴표 영역들은 각각의 행 트랙들이다! */
        }
    
        /* grid-area 속성을 사용하여 그리드 컨테이너의 바로 아래 하위요소 항목들에 이름을 지정해준다 */
        header { grid-area: header; }
        article { grid-area: article; }
        aside { grid-area: sidebar; }
        footer { grid-area: footer; }

☞ 어떤 라인번호도 사용할 필요없이, 직전에 다룬 [라인기반 그리드 배치]와 완전히 똑같은, 또한 html 요소의 배치와도 완전히 맞아 떨어지는 레이아웃이 만들어졌습니다! 찬찬히 코드를 살펴보면서 비교해보십시오..