CSS 그리드의 행 수와 너비
그리드 요소는 행을 따라 배치할 수도 있습니다.
이를 위한 속성은 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: 600px;
}
#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: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
행 크기를 지정하기 위해 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: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
행 높이를 50px로 설정하고,
값 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;
}
:
실습 과제
블록을 세 개의 행에 배치하세요.
첫 번째 블록은 100px 크기를,
두 번째는 150px,
세 번째는 200px 크기를 가지게 하세요.
그리드에 세 개의 행이 있다고 가정하세요. 모든 행이 동일한 너비를 가지도록 만드세요.
