grid-area 속성에서 span 잘 활용하기.

span 은 grid 선을을 기준으로 늘리는것이다.

 

이때 span 의 위치는 시작일수도있고 끝일수도있는데, 의미가 다르다.

grid-colum 의 경우

span 의 오른쪽에 올 경우 우측 방향으로 , 즉 width 가 우측으로 늘어나며,

span 이 먼저 오는 경우는 오른쪽에서 왼쪽으로 width 가 늘어난다. 

span 이 먼저 오는 경우가 조금 사용을 안하는데, 마치 right: 0 으로 두고 width 을 증가시키는것돠 비슷한 원리이다.

#foot {
	
    grid-column : 1 / span 4; /* line 1 에서 우측 방향으로 4만큼 이동하라. */

}

#foo {

    grid-column: span 4 / 10; /* line 10 에서 왼쪽으로 4칸. right: 0 과 비슷한 원리 */
	
}