[CSS] Grid grid-auto-rows

grid-auto-rows 에 대해 배워보았다.

아! 물론 grid-auto-column 도 있다. 하지만 주로 사용되는 것은 grid-auto-rows 라고 한다.

대체 어떤 용도로 사용되는 것일까?

 

다음 레이아웃을 보자.

<style>
  /* grid-auto-columns, grid-auto-rows */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, minmax(100px, auto));
    gap: 1rem;
  }
</style>

위 처럼 레이아웃이 잡힌다. 

그런데 조금 이상하다. 아이템 F , I 가 있는 행에는 minimum height 가 적용이 되지않은 모습이다.

그 이유는 grid-tempate-rows : repeat(3, minmax(100px,auto)) 3으로 하드코딩이 되어있기 때문이다.

 

만약 동적으로 데이터가 계속 추가되는 상황이면 어떻게 해야할까?

repeat(5, minmax(100px,auto)) 이렇게 repeat 내부의 숫자를 계속 바꾸어 줄 수 없는 노릇이다.

 

그럴 때 사용되는 것이 grid-auto-rows 이다.

 grid-auto-rows 를 사용하면 앞으로 추가되는 모든 레이아웃에 minmax를 적용할 수 있게된다.

    <style>
      /* grid-auto-columns, grid-auto-rows */
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        gap: 1rem;
      }
    </style>