CSS grid-area와 grid-template-areas로 그리드 항목에 이름 지정하기

CSS 그리드 레이아웃에서 특정 영역에 이름을 부여하고 싶다면 grid-area 속성을 사용하면 됩니다. 이 속성은 grid-template-areas 속성과 함께 작동하여, 컨테이너 내부의 그리드 항목들을 원하는 위치와 크기로 배치할 수 있게 해줍니다.

동작 방식

먼저 grid-template-areas 속성으로 그리드 컨테이너 안에 이름이 붙은 영역을 정의합니다. 각 문자열은 그리드의 한 행(row)을 나타내며, 문자열 안의 각 단어는 하나의 셀(열)을 의미합니다. 마침표(.)는 빈 셀을 나타냅니다.

그 다음, 배치하고자 하는 그리드 항목에 grid-area 속성을 사용해 앞서 정의한 영역 이름을 지정하면, 해당 항목이 그 영역 전체를 차지하게 됩니다.

예제 코드

아래 예제에서는 'demo'라는 이름의 영역을 정의하고, 첫 번째 그리드 항목(.ele1)을 해당 영역에 배치합니다. 'demo' 영역은 2행 2열 크기로 지정되어 있으므로, 첫 번째 항목이 왼쪽 상단의 넓은 공간을 차지하게 됩니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-areas: 'demo demo . . .' 'demo demo . . .';
            padding: 20px;
            grid-gap: 10px;
         }
         .container > div {
            background-color: orange;
            text-align: center;
            padding: 10px 0;
            font-size: 20px;
         }
         .ele1 {
            grid-area: demo;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <div class = "container">
         <div class = "ele1">1</div>
         <div class = "ele2">2</div>
         <div class = "ele3">3</div>
         <div class = "ele4">4</div>
         <div class = "ele5">5</div>
         <div class = "ele6">6</div>
      </div>
   </body>
</html>

코드 설명

.container: display: grid;로 그리드 컨테이너를 선언하고, grid-template-areas로 'demo' 영역을 2행 × 2열 크기로 정의합니다.
.container > div: 모든 그리드 항목에 공통 스타일(배경색, 텍스트 정렬, 패딩, 글꼴 크기)을 적용합니다.
.ele1: grid-area: demo;를 통해 첫 번째 항목을 'demo' 영역에 배치합니다.

이처럼 grid-area와 grid-template-areas를 조합하면 복잡한 레이아웃도 직관적인 이름 기반으로 쉽게 구성할 수 있습니다.