Grid Row
Grid Row
그리드에서 요소가 차지하는 행의 위치와 범위를 정해주는 유틸리티예요. 행을 몇 칸 차지하게 할지, 어느 라인에서 시작하고 끝날지를 자유롭게 조절할 수 있어요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
row-span-<number> |
grid-row: span <number> / span <number>; |
row-span-full |
grid-row: 1 / -1; |
row-span-(<custom-property>) |
grid-row: span var(<custom-property>) / span var(<custom-property>); |
row-span-[<value>] |
grid-row: span <value> / span <value>; |
row-start-<number> |
grid-row-start: <number>; |
-row-start-<number> |
grid-row-start: calc(<number> * -1); |
row-start-auto |
grid-row-start: auto; |
row-start-(<custom-property>) |
grid-row-start: var(<custom-property>); |
row-start-[<value>] |
grid-row-start: <value>; |
row-end-<number> |
grid-row-end: <number>; |
-row-end-<number> |
grid-row-end: calc(<number> * -1); |
row-end-auto |
grid-row-end: auto; |
row-end-(<custom-property>) |
grid-row-end: var(<custom-property>); |
row-end-[<value>] |
grid-row-end: <value>; |
row-auto |
grid-row: auto; |
row-<number> |
grid-row: <number>; |
-row-<number> |
grid-row: calc(<number> * -1); |
row-(<custom-property>) |
grid-row: var(<custom-property>); |
row-[<value>] |
grid-row: <value>; |
예시 (Examples)
행을 여러 칸 차지하기 (Spanning rows)
row-span-<number> 유틸리티를 row-span-2나 row-span-4처럼 사용하면 요소가 n개의 행을 차지하게 만들 수 있어요.
<div class="grid grid-flow-col grid-rows-3 gap-4">
<div class="row-span-3 ...">01</div>
<div class="col-span-2 ...">02</div>
<div class="col-span-2 row-span-2 ...">03</div>
</div>
시작 라인과 끝 라인 정하기 (Starting and ending lines)
row-start-<number>나 row-end-<number> 유틸리티를 row-start-2와 row-end-3처럼 사용하면 요소가 n번째 그리드 라인에서 시작하거나 끝나도록 만들 수 있어요.
<div class="grid grid-flow-col grid-rows-3 gap-4">
<div class="row-span-2 row-start-2 ...">01</div>
<div class="row-span-2 row-end-3 ...">02</div>
<div class="row-start-1 row-end-4 ...">03</div>
</div>
이런 것들은 row-span-<number> 유틸리티와 함께 조합해서 특정 개수의 행을 차지하게 만들 수도 있어요.
사용자 정의 값 사용하기 (Using a custom value)
row-[<value>], row-span-[<value>], row-start-[<value>], row-end-[<value>] 같은 유틸리티를 사용하면 완전히 사용자 정의한 값으로 그리드 행의 크기와 위치를 정할 수 있어요.
<div class="row-[span_16_/_span_16] ...">
<!-- ... -->
</div>
CSS 변수를 사용할 때는 row-(<custom-property>) 문법도 쓸 수 있어요.
<div class="row-(--my-rows) ...">
<!-- ... -->
</div>
이것은 row-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.
반응형 디자인 (Responsive design)
grid-row, grid-row-start, grid-row-end 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="row-span-3 md:row-span-4 ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.