Grid Template Areas

grid-template-areas으로 넘어가기전에 grid-template를 repeat(num,size); 함수를 사용하여 반복적인 동작을 수행할 수 있다. 이제 grid-template-areas를 가지고 멋진 layout을 만들어 볼 것이다.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  grid-template-rows: 100px repeat(2, 200px) 100px;
  grid-template-areas:
    "header header header header"
    "content content content nav"
    "content content content nav"
    "footer footer footer footer";
}
.header {
  background-color: #2ecc71;
  grid-area: header;
}
.content {
  background-color: #3498db;
  grid-area: content;
}
.nav {
  background-color: #8344ad;
  grid-area: nav;
}
.footer {
  background-color: #f39c12;
  grid-area: footer;
}

<div class="grid">
      <div class="header"></div>
      <div class="content"></div>
      <div class="nav"></div>
      <div class="footer"></div>
    </div>

  grid-template-columns: repeat(4, 200px);
  grid-template-rows: 100px repeat(2, 200px) 100px;
  grid-template-areas:
    "header header header header"
    "content content content nav"
    "content content content nav"
    "footer footer footer footer";

이 코드를 보면 column과 row 갯수에 맞추어서 areas에 각 영역에 문자로 범위를 지정하였다. 그리고 그 영역에 들어갈 style을 다음과 같이 구현했다.

.header {
  background-color: #2ecc71;
  grid-area: header;
}
.content {
  background-color: #3498db;
  grid-area: content;
}
.nav {
  background-color: #8344ad;
  grid-area: nav;
}
.footer {
  background-color: #f39c12;
  grid-area: footer;
}

grid-area로 영역에 들어간 문자를 쓰면 해당 스타일이 영역에 적용되는걸 볼 수 있다. 그리고 이러한 방법으로 layout을 구성했다.

만약 grid-template-areas에 다음과 같이 영역을 비워두면 브라우저는 해당 영역을 빈 공간으로 처리한다.

"header header header header"
"content content . nav"
"content content . nav"
"footer footer footer footer";

areas를 통해 flex처럼 px, main axis, cross axis같은 개념이 필요 없다. 눈에 보이는 대로 그려지기에 직관적으로 이해하기 쉽다.

Rows and Columns

layout을 나누는 방법중 grid-template-areas를 안쓰고도 다음과 같은 property로 같은 효과를 낼 수 있다.

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}
.header {
  background-color: #2ecc71;
  grid-column-start: 1;
  grid-column-end: 5;
}
.content {
  background-color: #3498db;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}
.nav {
  background-color: #8344ad;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 4;
}
.footer {
  background-color: #f39c12;
  grid-column-start: 1;
  grid-column-end: 5;
}

여기서 property를 4종류를 써서 areas와 같은 layout을 만들어 냈다.

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

layout영역을 정하는 정수는 element를 가르키는 것이 아니라 grid의 line을 가리킨다. 다른말로 grid-template-column을 4라고 지정하면 grid-column의 갯수는 1부터 5까지 라고 보면된다.