● grid-column-start, grid-column-end, grid-row-start, grid-row-end 속성

그리드 컨테이너를 구성하는 행과 열을 그리는 선을 그리드 라인이라고 합니다. 그리드 라인에는 각각 고유한 번호가 있는데, 이를 그리드 넘버라고 합니다. 다음 그림에서 1~4까지의 숫자가 그리드 넘버입니다.

그림 7-19 그리드 넘버

grid-column-start, grid-column-end 속성은 그리드 넘버를 이용해 그리드 아이템의 열 시작 위치와 종료 위치를 지정합니다. 그리고 grid-row-start, grid-row-end 속성은 그리드 아이템의 행 시작 위치와 종료 위치를 지정합니다. 그러면 4가지 속성을 조합해 그리드 아이템의 배치를 지정할 수 있습니다. 만약 앞의 그림처럼 그리드 아이템을 배치하고 싶다면 다음과 같이 코드를 작성합니다.