[CSS] grid-row 동작 방식 살펴보기

grid-row-start, grid-row-end 속성은 그리드 아이템이 어느 행 라인부터 시작하여 어느 행 라인에서 끝날지 지정할 때 사용한다. 이 속성은 그리드 아이템(그리드 컨테이너의 직계 자식 요소) 자체에 적용한다. 참고로 그리드 라인은 컨테이너 시작 지점부터 1, 2, 3, … 양수 번호가 부여되고, 컨테이너 끝 지점부터는 -1, -2, -3, … 음수 번호가 부여된다.

/* 그리드 아이템이 1~2번 라인 차지(첫 번째 행 트랙) */
grid-row-start: 1; 
grid-row-end: 2;

 

grid-row-start: 1; grid-row-end: 2;

 

span은 그리드 아이템이 차지할 트랙의 개수를 지정할 때 사용한다. 여기서 트랙(track)이란 두 그리드 라인 사이의 공간을 의미한다. 그리드 셀 1개는 기본적으로 하나의 행 트랙과, 하나의 열 트랙이 교차하여 만들어지는 최소 단위 공간으로, 한 칸을 의미한다. 예를 들어 span 2 를 사용하면 아이템이 2개의 행(또는 열) 트랙을 차지하도록 지정할 수 있다.

grid-row-start: auto; /* 브라우저가 자동으로 아이템 행 시작 위치 결정 */
grid-row-end: span 2; /* 그리드 아이템이 시작 지점부터 2개 행 차지 */

 

grid-row-start: auto; grid-row-end: span 2;

 

grid-row 속성은 행 시작 위치(첫 번째 값; grid-row-start)와 종료 위치(두 번째 값: grid-row-end)를 한 번에 지정할 수 있는 단축 속성이다. 두 값은 슬래시 / 를 이용하여 구분한다.

grid-row: auto / span 2;
/* 아래와 동일 */
/* grid-row-start: auto; */
/* grid-row-end: span 2; */

 

grid-row 속성의 두 번째 값을 생략하면 grid-row-end 값은 auto(하나의 트랙만 차지)로 설정된다.

grid-row: 2;
/* 아래와 동일 (2~3번 라인 차지) */
/* grid-row-start: 2; */
/* grid-row-end: auto; */
/* -> grid-row-end: 3 혹은 grid-row-end: span 1 과 동일하게 동작 */

 

시작/종료 라인 모두 동일한 span 값을 지정하면, grid-row-end만 지정한 것처럼 동작한다. CSS 명세에 따르면, 시작/종료 라인 값이 같을 경우 종료 라인은 무시되어 auto로 처리된다. 시작 라인이 span, 종료 라인이 auto 일 땐, 시작 라인 auto, 종료 라인 span으로 지정한 것과 동일하게 동작한다(참고글).

 

참고로 Tailwind CSS의 row-span-2 같은 클래스도 내부적으로 grid-row: span 2 / span 2 형태로 지정되어 있기 때문에 결과적으로 grid-row: auto / span 2와 동일하다고 볼 수 있다.

grid-row: span 2 / span 2;
/* 아래처럼 동작 (현재 위치에서 2개의 행 트랙 차지) */
/* grid-row-start: auto; */
/* grid-row-end: span 2; */

 

속성 값에 span 키워드를 단독으로 사용했을 때도 시작 라인 auto, 종료 라인 span으로 해석돼서 gird-row-end만 지정한 것처럼 동작한다.

grid-row: span 2;
/* grid-row: span 2 / auto; */ 
/* -> grid-row: auto / span 2; 처럼 동작 */

 

💡 grid-column, grid-row는 각각 수평(열), 수직(행) 방향 차이만 있을 뿐 속성의 동작 원리는 동일하다.