Grid 행 높이 같게 만드는 방법 - grid-auto-rows

행의 높이를 같게 만들기 위해서 grid-auto-rows를 사용합니다. 행 높이가 달라질 경우 자동으로 모든 행의 높이가 같게 유지됩니다.

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;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

 

기타 CSS 참조

Post a Comment