CSS 그리드 합치기 - grid-column, grid-row, span, grid-area

1. grid-column

 

grid-column: 1 / 3;

// 1번째 칸에서 3번째 칸 전까지 (first-child에서 사용)

// 아래와 같다.

// grid-column-start: 1;

// grid-column-end: 3;

 

 

2. grid-row

 

grid-row: 1 / 3;

// 위와 같은 방식

 

 

3. 한 줄을 다 차지하게 할 때

 

 grid-column: 1 / -1;

 

 

3. span

 

위에서처럼 위치를 정해주지 않고 

상대적으로 자식 그리드의 크기만 설정할 때

 

grid-column: span 2; // 가로로 두 그리드 차지

grid-row: span 2; // 세로로 두 그리드 차지

 

 

5. grid-area

 

grid-area: span 2 / span 2;

// 위와 같다.

// grid-area: row의 개수 / column의 개수

 

grid-area: 2 / 1 / 4 / -1;

// 세로로 2번째 줄에서 4번째 줄 전까지, 가로로 1번째 줄에서 -1번째(전부) 줄까지

// grid-area: row의 시작점 / column의 시작점 / row의 끝점 / column의 끝점