grid-auto-rows
그리드에서 열 개수는 grid-template-columns로 정합니다. 정해진 열 개수를
넘어가면 행이 바뀌고 높이는 행마다 다르게 정해집니다.
예를 들어 다음은 첫번째 행의 높이와 다른 행의 높이는 다릅니다.
<div class="container">
<div class="item">Item<br>Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.item {
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
모든 행의 높이를 같게 만들기 위해서 grid-template-rows 속성을 추가하면, 그 속성에서 정의된 행만 높이가 같아집니다. 행의 개수가 정해진 상태가 아니라면, 즉 행의 개수가 더 늘어날 수도 있다면 CSS를 계속 고쳐야 한다는 문제가 생깁니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.item {
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
이를 해결해주는 속성이 grid-auto-rows 속성입니다. 행의 개수가 늘거나 줄어도 일정한 값을 적용받게 해줍니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
}
.item {
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
다시 말해서 행의 개수가 늘어도 CSS를 수정할 필요가 없습니다.
<div class="container">
<div class="item">Item<br>Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
}
.item {
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.