[CSS] grid-auto-rows

🔗minmax 함수 먼저 보고 오기

1. grid-auto-rows(grid-auto-cols도 있습니다)

.grid-area {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    /* grid-template-rows: repeat(10, minmax(100px, 1fr)); */
    grid-auto-rows: minmax(100px, 1fr);
    width: 100%;
  }

• `grid-template-rows`의 역할은 몇 행이 올 지 개수를 적으면서 행의 높이를 정해줄 수가 있죠.(1행만 오는 경우 높이만 지정. 1행만의 높이만 지정할 경우 grid-template-rows: 50px이든 grid-auto-rows: 50px이든 동일한 효과.)
• `grid-auto-rows` 의 역할은 요소가 얼마나 올 지 모를 때 알아서 rows 의 높이를 맞춰주는 역할을 합니다. 요소의 행이 몇 행이 나오는지는 상관하지 않고 각 행의 높이를 지정해줄 수 있습니다. (background-color 는 #BA55D3 색깔이 깔려 있습니다.)
• `grid-auto-flow: ;`랑은 아무 상관 없는 개념입니다. grid-auto-flow 는 grid 내부에서 자동 배치된 아이템들이 어느 방향으로 흐를 지 정해줍니다.

 

만약 grid-auto-rows를 쓰지 않고 grid-template-rows 를 쓴다면 어떻게 될까요?

rows를 어떻게 해서든 10칸 높이만큼 채우려고 하는군요. 목적에 맞게 잘 골라서 써야겠습니다.

*불필요하게 둘을 같이 쓸 필요가 없습니다.

 

 

tailwind랑 같이 쓴다면?

/* 방법 1 */

<div className='grid w-full auto-rows-[minmax(100px,auto)] grid-cols-[repeat(5,minmax(100px,1fr))] grid-rows-[minmax(100px,1fr)] gap-1 bg-primary text-white '>
    {items.map(item => (
      <div className='bg-violet-600 odd:bg-sky-600' key={item}>
        {item}
      </div>
    ))}
</div>
  

/* 방법 2 */
<div className='grid-area gap-1 bg-primary text-white'>
    {items.map(item => (
      <div className='bg-violet-600 odd:bg-sky-600' key={item}>
        {item}
      </div>
    ))}
</div>