[DAY23] css -grid

그리드 행 : row
그리드 열 : column
grid-template-columns
grid-template-rows
grid-template : {grid-template-rows} / {grid-template-columns}

grid-column-start : grid요소의 시작 열(column) 위치를 지정합니다.
grid-column-end : grid요소의 마지막 열(column) 위치를 지정합니다.(숫자 이전까지 적용됨)
grid-column : start, end 합친것
예) grid-column : 4 / 6 ; // grid-column: {start} / {end} ;
==> span 사용 가능

그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신, span을 이용하여 열(column)의 넓이를 지정할 수 있습니다. span은 양수만 설정 가능합니다.

예) grid-column-end: span 2;

grid-row-start:grid요소의 시작 행(row) 위치를 지정합니다.
grid-row-end:grid요소의 마지막 행(row) 위치를 지정합니다.
grid-row : {start} / {end};
==> span 사용가능

grid-area : grid-row-start / grid-column-start / grid-row-end / grid-column-end