Grid Template Rows

그리드에서 몇 개의 행(row)을 만들고 각 행의 크기를 어떻게 배분할지 정해주는 유틸리티예요. 동일한 크기의 행 여러 개를 쉽게 만들 수 있어요.

출처: 문서

본문

ClassStyles

Class	Properties
`grid-rows-<number>`	`grid-template-rows: repeat(<number>, minmax(0, 1fr));`
`grid-rows-none`	`grid-template-rows: none;`
`grid-rows-subgrid`	`grid-template-rows: subgrid;`
`grid-rows-[<value>]`	`grid-template-rows: <value>;`
`grid-rows-(<custom-property>)`	`grid-template-rows: var(<custom-property>);`

예시 (Examples)

그리드 행 지정하기 (Specifying the grid rows)

grid-rows-<number> 유틸리티를 grid-rows-2나 grid-rows-4처럼 사용하면 n개의 동일한 크기 행을 가진 그리드를 만들 수 있어요.

<div class="grid grid-flow-col grid-rows-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

서브그리드 구현하기 (Implementing a subgrid)

grid-rows-subgrid 유틸리티를 사용하면 부모가 정의한 행 트랙(track)을 그대로 물려받을 수 있어요.

<div class="grid grid-flow-col grid-rows-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="row-span-3 grid grid-rows-subgrid gap-4">
    <div class="row-start-2">06</div>
  </div>
  <div>07</div>
  <!-- ... -->
  <div>10</div>
</div>

사용자 정의 값 사용하기 (Using a custom value)

grid-rows-[<value>] 문법을 사용하면 완전히 사용자 정의한 값으로 행을 정할 수 있어요.

<div class="grid-rows-[200px_minmax(900px,1fr)_100px] ...">
  <!-- ... -->
</div>

CSS 변수를 사용할 때는 grid-rows-(<custom-property>) 문법도 쓸 수 있어요.

<div class="grid-rows-(--my-grid-rows) ...">
  <!-- ... -->
</div>

이것은 grid-rows-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.

반응형 디자인 (Responsive design)

grid-template-rows 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="grid grid-rows-2 md:grid-rows-6 ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

Grid Template Rows