CSS 그리드 레이아웃에서 영역 설정하는 방법

CSS 그리드 레이아웃(Grid Layout)에서 특정 영역을 정의하고 배치하려면 grid-template-areas 속성을 사용합니다. 이 속성을 활용하면 각 셀에 이름을 지정해 직관적이고 시각적으로 이해하기 쉬운 레이아웃 구조를 만들 수 있습니다.

grid-template-areas 속성이란?

grid-template-areas는 그리드 컨테이너 내부의 영역(areas)에 이름을 부여하여, 요소가 차지할 위치를 문자열 형태로 지정하는 속성입니다. 각 행(row)은 따옴표로 묶인 문자열로 표현되며, 공백으로 구분된 각 항목은 하나의 그리드 셀을 의미합니다.

같은 이름을 가진 셀들이 모여 하나의 영역(area)을 형성합니다.
점(.)은 빈 셀, 즉 어떤 영역에도 속하지 않는 셀을 나타냅니다.
요소에 grid-area 속성으로 영역 이름을 지정하면 해당 위치에 자동 배치됩니다.

예제 코드

다음 예제는 'newArea'라는 이름의 영역을 정의하고, 해당 영역에 요소를 배치하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    grid-area: newArea;
}
.grid-container {
    display: grid;
    grid-template-areas:
    'newArea newArea . . .'
    'newArea newArea . . .';
    grid-gap: 5px;
    background-color: blue;
    padding: 5px;
}
.grid-container > div {
    background-color: orange;
    text-align: center;
    padding: 5px 0;
    font-size: 30px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

코드 설명

위 코드의 핵심 부분을 살펴보겠습니다.

1. 영역 이름 지정

.demo 클래스에 grid-area: newArea;를 적용하여 이 요소가 'newArea' 영역에 배치되도록 설정했습니다.

2. 그리드 영역 구조 정의

grid-template-areas:
'newArea newArea . . .'
'newArea newArea . . .';

그리드는 총 2행 5열 구조로 구성됩니다. 첫 번째와 두 번째 열에 걸쳐 'newArea' 영역이 2×2 크기로 형성되며, 나머지 세 개의 열은 점(.)으로 표시되어 비어 있는 상태로 유지됩니다.

3. 자동 배치 동작

'demo' 클래스를 가진 요소는 'newArea' 영역(2×2 크기)에 배치되고, 나머지 요소들(item2~item7)은 남은 빈 셀과 점(.)으로 표시된 셀을 포함한 사용 가능한 공간에 순서대로 자동 배치됩니다.

실행 결과

위 코드를 실행하면 파란색 배경의 그리드 컨테이너 안에서, '250' 값이 들어간 demo 요소가 좌측 상단의 2×2 크기 영역을 차지하고, 나머지 숫자들이 오렌지색 셀에 배치되는 것을 확인할 수 있습니다.

마무리

grid-template-areas 속성은 복잡한 레이아웃을 마치 그림을 그리듯 직관적으로 설계할 수 있게 해주는 강력한 도구입니다. 헤더, 사이드바, 메인 콘텐츠, 푸터 등으로 구성된 웹 페이지 레이아웃을 만들 때 특히 유용하므로, 다양한 영역 조합을 연습해 보시길 권장합니다.

CSS 그리드 레이아웃에서 영역 설정하는 방법 – grid-template-areas 활용법