● grid-column과 grid-row 속성

grid-column 속성은 grid-column-start, grid-column-end 속성을, grid-row 속성은 grid-row-start, grid-row-end 속성을 한 번에 사용할 수 있는 단축 속성입니다.

grid-column:<start> <end>;
grid-row:<start> <end>;

또는 시작 번호부터 몇 개의 그리드 셀을 차지할지를 적어도 됩니다.

grid-column:<start>/span <열 개수>;
grid-row:<start>/span <행 개수>;

다음과 같이 grid-column-start와 grid-column-end 속성, grid-row-start와 grid-row-end 속성을 모두 사용한 코드가 있다고 합시다.

grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;

이 코드를 다음처럼 간단하게 작성할 수 있습니다.

grid-column:1/3; /* 또는 grid-column:1/span 2; */
grid-row:1/3; /* 또는 grid-row:1/span 2; */