CSS grid-template 속성 완벽 정리 – 그리드 레이아웃 행·열·영역 한 번에 설정하기

CSS Grid 레이아웃을 만들 때 grid-template 속성은 핵심 역할을 합니다. 이 속성은 축약형(shorthand) 속성으로, 그리드의 행(row) 개수와 크기, 열(column) 개수와 크기, 그리고 필요하다면 그리드 영역(grid areas)까지 한 번의 선언으로 정의할 수 있습니다.

grid-template 속성 문법

grid-template 속성의 기본 문법은 다음과 같습니다.

grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit;

각 값이 의미하는 바는 다음과 같습니다.

none – 기본값으로, 그리드 템플릿을 별도로 지정하지 않습니다.
grid-template-rows / grid-template-columns – 행과 열의 크기를 각각 지정합니다. 예를 들어 grid-template: 100px / auto auto auto;는 높이 100px의 행 하나와 자동 너비의 열 세 개로 구성된 그리드를 만듭니다.
grid-template-areas – 영역 이름을 사용해 요소가 차지할 셀 범위를 직관적으로 정의합니다.
initial – 속성값을 기본값(none)으로 되돌립니다.
inherit – 부모 요소의 grid-template 값을 상속받습니다.

예제 코드

아래 예제는 grid-template 속성을 활용해 높이 100px의 행 하나와 열 세 개로 구성된 그리드 컨테이너를 만들고, 그 안에 아홉 개의 숫자 항목을 배치한 것입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: grid;
    grid-template: 100px / auto auto auto;
    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>그리드 템플릿 예제</h1>
<p>3열 그리드에 숫자 항목을 배치합니다</p>
<div class="grid-container">
<div class="item1">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 class="item8">723</div>
<div class="item9">811</div>
</div>
</body>
</html>

실행 결과

코드를 실행하면 파란색 배경의 그리드 컨테이너 안에 주황색 셀들이 격자 형태로 배치됩니다. 행 높이는 100px로 고정되고, 세 개의 열은 남은 공간을 균등하게 나누어 가지며(auto), 셀 사이에는 5px의 간격(grid-gap)이 적용됩니다. 아홉 개의 숫자 항목은 각 셀의 중앙에 정렬되어 표시됩니다.

정리

grid-template 속성을 사용하면 grid-template-rows, grid-template-columns, grid-template-areas를 개별적으로 선언하지 않고도 한 줄로 그리드 구조를 정의할 수 있어 코드가 간결해집니다. 반응형 레이아웃을 설계할 때는 fr 단위나 minmax() 함수와 함께 활용하면 더욱 유연한 그리드를 구성할 수 있습니다.