Grid 템플릿 영역

사용법

grid-area 속성으로 설정된 그리드 영역의 이름을 참조하여, 그리드 템플릿 영역을 설정할 수 있습니다. 그리드 영역 이름을 반복하면 그리드 셀을 병합(merge, span) 합니다. 그리고 마침표(.)는 비어있는 그리드 셀을 말합니다.

속성	값
grid-template-areas	<grid-area-name>
	.
	none

값

• <grid-area-name>: 사용자가 grid-area 속성 값으로 설정한 임의의 그리드 영역 이름

• 마침표(.): 비어있는 그리드 셀

• none: 그리드 영역으로 정의되지 않은 셀

예시

다음은 3행 4열 그리드 템플릿 영역 설정 예시입니다.

.grid-container {
  grid-template-rows: repeat(3, 300px);
  grid-template-columns: repeat(4, 1fr);

  /**
   * 그리드 템플릿 영역 설정
   * 각 행은 동일한 개수의 열 설정이 요구됩니다.
   */
  grid-template-areas:
    "header header header header"  /* 1행: 4열 모두 header                */
    "main main . sidebar"          /* 2행: 2열 main 1열, 공백 1열, sidebar */
    "footer footer footer footer"; /* 3행: 4열 모두 header                */
}

/* 그리드 영역 이름 설정 */
.grid-header  { grid-area: 'header';  }
.grid-main    { grid-area: 'main';    }
.grid-sidebar { grid-area: 'sidebar'; }
.grid-footer  { grid-area: 'footer';  }

그리드 템플릿 영역 설정은 그리드 라인 설정이 아니라, 영역을 설정하는 것입니다. 영역을 설정하면 그리드 라인 이름이 자동으로 설정됩니다. grid-area로 설정된 이름을 사용하여 각 행/열의 시작은 -start, 끝은 -end로 이름이 설정됩니다. 예를 들면 다음과 같습니다.

[header-start]                               [header-end]
[main-start]  [main-end ] . [sidebar-start]  [sidebar-end]
[footer-start]                               [footer-end]

실습

레퍼런스

명시적으로 그리드를 정의할 때, 그리드 컨테이너에 3개의 속성을 사용해 설정할 수 있습니다.

• grid-template-rows
• grid-template-columns
• grid-template-areas

CSS Grid Layout Module Level 1

w3.org/TR/css-grid-1/#grid-template-areas-property