이름이 지정된 CSS 그리드 항목으로 열과 행 표시하는 방법

개요

CSS Grid에서 이름이 지정된(named) 그리드 영역을 사용해 열과 행을 배치하려면 grid-area 속성과 grid-template-areas 속성을 함께 사용합니다.

grid-template-areas는 그리드 컨테이너의 전체 레이아웃 구조를 문자열로 정의하는 속성입니다. 문자열 안의 각 이름은 하나의 영역(area)을 나타내며, 점(.)은 비어 있는 셀을 의미합니다. 이렇게 정의된 영역 이름을 자식 요소의 grid-area 값으로 지정하면, 해당 요소가 그 영역 전체를 차지하게 됩니다.

주요 속성 정리

grid-template-areas: 그리드 컨테이너에 영역 이름별 배치 구조를 정의합니다.
grid-area: 자식 요소를 특정 영역 이름에 할당합니다.
grid-gap: 행과 열 사이의 간격을 설정합니다.

예제

아래 예제에서는 'demo'라는 이름의 영역을 2행 × 2열 크기로 정의하고, 첫 번째 항목(ele1)을 해당 영역에 배치합니다.

<!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>

실행 결과 설명

위 코드를 실행하면 초록색 그리드 컨테이너 안에서 1번 항목이 왼쪽 상단의 2×2 크기 'demo' 영역 전체를 차지합니다. 나머지 항목(2~6번)은 별도의 영역 이름이 없으므로 남은 셀에 자동으로 배치되며, 점(.)으로 표시된 셀은 빈 공간으로 유지됩니다.

이처럼 grid-template-areas로 레이아웃 구조를 시각적인 문자열 형태로 정의하면, 복잡한 그리드 배치도 코드만 보고 직관적으로 파악할 수 있다는 장점이 있습니다.