grid-template 속성

grid-template 속성은 그리드에서 요소가 차지할 행과 열의 수와 너비를 지정하며, grid-template-rows 속성과 grid-template-columns 속성을 한 번에 지정하는 축약형입니다. 요소가 배치될 행과 열은 슬래시(/)로 구분하여 지정합니다. grid-template 속성은 부모 요소에 지정되어 자식 요소들의 배치를 정의합니다. 속성 값에는 크기 단위를 사용하여 행이나 열의 너비를 지정합니다.

속성 값에 픽셀(px)을 사용하면 요소의 크기가 정확히 그 값에 맞춰집니다. auto 키워드를 지정하면 열과 행이 사용 가능한 모든 공간을 채웁니다. fr 단위(비율 단위)를 사용하면 전체 공간이 동일한 비율로 나누어집니다. fr 단위의 장점은 서로 다른 컨테이너나 화면 해상도에 유연하게 적응한다는 점입니다. fr는 정확한 픽셀 크기에 의존하지 않고 지정된 수의 비율로 공간을 분할하기 때문입니다.

구문

선택자 {
	grid-template: 행의 너비와 수 / 열의 너비와 수;
}

예제

grid-template 속성을 사용하여 테이블을 만들어 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이번에는 두 번째와 세 번째 행의 너비를 동일하게 하고, 각 열의 너비를 다르게 지정해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이전 예제의 테이블에서 상단 행의 너비를 2fr로, 첫 번째 열의 너비를 0.5fr로 만들어 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

참고 항목

열과 행 속성을 한 번에 지정하는 축약형 속성인 grid
그리드에서 행의 수와 너비를 지정하는 속성인 grid-template-rows
그리드에서 열의 수와 너비를 지정하는 속성인 grid-template-columns