그리드 Area에 이름을 붙이고 그 이름을 이용해 배치하는 방법이다.

1. grid-template-area

1) grid-area를 이용한 이름과 위치 지정

: grit-template-area 를 통해서 각각의 컨테이너에 이름과 위치를 지정해 줄 수 있다.

.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-template-areas: "head head"
                       "nav nav" 
                       "info services"
                       "footer footer";
  grid-template-rows: 300px 120px 800px 120px;
  grid-template-columns: 1fr 3fr; 
}

header {
  grid-area: head;
} 

nav {
  grid-area: nav;
} 

.info {
  grid-area: info;
} 

.services {
  grid-area: services;
}

footer {
  grid-area: footer;
} 

• grid-template-area 를 이용해서 각각의 컨테이너에 이름을 부여할 수 있다.
• grid-area 를 이용해서 그 이름을 가질 위치를 설정해 줄 수 있다.

2) grid-area를 이용한 겹치기

: 또 다른 방법으로는 시작과 끝점을 지정해서 쉽게 겹치게 하는 방법이다.

.container {
  display: grid;
  grid-template: repeat(8, 200px) / repeat(6, 100px);
}

.info {
  grid-area: 1 / 1 / 9 / 4;
}

.services {
  grid-area: 1 / 4 / 9 / 7;
}

img {
  grid-area: 2 / 3 / 5 / 5;
  z-index: 5;
}

• 9개의 행과, 6개의 열이 있다.
• info는 1부터 8까지의 행을 겹치게 만들고, 1부터 3까지의 열을 겹치게 만든다.