grid-template-rows 속성

속성 grid-template-rows는 그리드 또는 그리드에서 요소가 차지할 행의 수와 너비를 설정합니다. 속성 값에는 행의 너비를 어떤 크기 단위로든 지정할 수 있습니다. 이 속성은 부모 요소에 지정되며 자식 요소들의 행 너비를 정의합니다.

속성 값에 픽셀을 사용하면 행 크기는 정확히 그에 맞춰집니다. 단어 auto를 지정하면 행은 사용 가능한 모든 공간을 채웁니다. 단위 fr(비율)을 사용하는 것은 전체 공간이 동일한 부분으로 나누어짐을 의미합니다. fr의 장점은 다양한 컨테이너나 화면 해상도에 대한 적응성입니다. 왜냐하면 fr는 픽셀 단위의 정확한 크기에 묶이지 않고 지정된 수의 비율로 공간을 나누기 때문입니다.

문법

선택자 {
	grid-template-rows: 행 너비;
}

예제

그리드에서 요소들의 행 너비를 설정해 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 50px 100px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

첫 번째와 세 번째 행에는 픽셀 단위의 고정 너비를 지정하고, 두 번째 행은 사용 가능한 공간을 자동으로 채우도록 해봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 100px auto 60px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이제 grid-template-rows 속성을 사용하여 첫 번째와 두 번째 행이 컨테이너의 한 부분을, 세 번째 행이 세 부분을 차지하도록 만들어 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

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

예제

fr 단위로 지정된 값은 소수 형태를 가질 수 있습니다. 이전 예제를 두 번째와 세 번째 행의 너비를 소수로 지정하여 변경해 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

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

예제

grid-template-rows 속성에 함수 repeat()를 지정하여 세 행 모두 동일한 너비를 가져야 한다고 컨테이너에 알려줍시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이제 이전 예제를 변경하여 세 개의 동일한 행에 컨테이너의 두 부분을 차지하는 네 번째 행을 추가해 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr) 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

첫 두 행의 너비를 컨테이너의 한 부분, 마지막 두 행의 너비를 두 부분으로 설정해 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이제 함수 repeat()와 자유 단위 fr를 사용하여 지정된 값을 조합하여 행 너비를 설정해 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

함수 repeat() 내에서 값 auto-fill을 지정할 수도 있으며, 이것은 우리가 원하는 너비의 동일한 행으로 컨테이너를 채웁니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, 50px);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

auto-fill와 함께 함수 minmax를 지정하는 것이 매우 편리합니다. 이 함수는 행 너비의 범위를 최소값에서 최대값까지 설정합니다. 컨테이너 너비가 모든 행을 수용할 수 없으면 그 중 일부가 새 줄로 이동하며, 줄 내의 행은 균등하게 분배됩니다. 이전 예제를 변경하여 함수 minmax를 지정해 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이제 auto-fit 속성을 지정해 봅시다. 이것과 auto-fill의 차이점은 사용 가능한 컨테이너 너비에 맞게 행 수를 조정하며, 행을 확장하거나 축소한다는 점입니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

또한 fr와 함께 % 값을 사용할 수 있으며, 이것 역시 행이 컨테이너의 어느 부분을 차지할지 정의합니다. 이때 먼저 %로 행 크기가 계산된 후, 남은 여유 공간이 비율로 나누어집니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

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

예제

grid-template-columns 속성과 grid-template-rows 속성을 함께 사용해 봅시다:

<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-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

grid-template-columns 속성과 grid-template-rows 속성을 사용하여 세 행에 배열된 아홉 개의 셀로 이루어진 테이블을 만들어 봅시다. 이때 두 번째와 세 번째 행은 동일한 너비를 가지고, 각 열은 다른 너비를 가지게 합니다:

<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-rows: 60px 1fr 60px;
	grid-template-columns: 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이제 이전 예제의 테이블에서 상단 행의 너비를 두 부분으로, 첫 번째 열의 너비를 0.5 부분으로 만들어 봅시다:

<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-rows: 2fr 1fr 1fr;
	grid-template-columns: 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

참고 항목

속성 grid-template-columns,
그리드에서 열의 수와 너비를 설정합니다
속성 grid-auto-rows,
암시적 그리드에서 행의 수와 너비를 설정합니다