Grid - Rows and Columns & shortcut

자 grid-template을 배워봤다. 분할이 잘되고 전체적인 html을 다루기가 쉬워진다.

 

그런데~ grid-template-area 프로퍼티를 사용하지 않고도 똑같이 가능하다 기초적인 걸로~

 

row와 column의 개념만 제대로 알고 있고 줄의 갯수만 셀수 있으면된다.

 

바로 grid-column(row)-start(end) 만 잘 이용해도~~

 

자 이전 template-area관련 속성은 다 지워주고 보자

자 높이 너비 모두 100px인  4x4의 그리드만 만들어줬다. 

아까 언급한 row와 column을 잘보고 줄 갯수만 잘보자 이경우엔 갭을 줬기에 줄갯수가 많지만 잘생각해보면

원래 가로세로 1~5번까지 줄이있다.~ 박스가 네개니까.

이상태에서 첫번째 박스에 grid-column-start: 1;  grdi-column-end: 5; 속성을 줘보자

자 다시 생각하자 column의 줄 왼쪽부터 1~5까지 있다.

그렇다 줄 1번부터 5번까지 박스의 위치를 정해준다.

자 이렇게 작성하면~!~!~!

짜잔 gap준거 빼고는 아까와 같은 형태의 html구조가 잡혔다.

그런데 이렇게 쓰는 것도 코드가 길어진다.

줄일수 있는 방법이 있는데 grid-column " / " 슬래시를 사용하며 된다.

grid-column프로퍼티에 1 /5 이렇게 값을 적어주면 1번 칼럼줄부터 5번 칼럼줄까지 라는 뜻이된다.

이렇게 코드를 바꿨다

쉽다... 근데 더 쉬운 방법이 있다고 한다!!!!

현재 footer 가 grid-column: 1/ 5;이다 근데~ 칼럼이 많다면 언제 그걸 다 세고 있겠는가

끝까지라고 설정하고 싶으면 1 / -1;이라고 해주면된다.

뭐랄까 index?파이썬의 슬라이싱? 에서 맨뒤는 -1이다. 그리고 역순으로 -1, -2, -3 이렇다.

그렇다면 column이나 row가 아 주 많다면 그 영역을 선택하기 더 쉬워진다.

 

그리고 한가지더! span을 이용해보자. span은cell 의 갯수를 지정해서 영역을 지정해준다

footer 같은경우는 span 4라고 적어주면 동일하다.