1. grid-start , end
grid-column-start: 1;
grid-column-end: 5;area를 사용하지않고 gird-start AND end 로 요소들의 크기와 위치를 자유롭게 정렬할 수 있다.
grid-column start AND end 는 첫번째 컬럼에서 시작하여 다섯번째 컬럼에서 끝나는게 아닌
첫번째 line에서 시작하여 다섯번째 line에서 끝난다는 말이다
stretch 하는것! (크기를 늘리는 것)여기서 매번 grid-colimn-start AND end 를 적는것이 매우 반복되는 작업이기 떄문에 간단하게
grid-column : 1/5로 해주면 start는 1이 되고 end는 5가 된다
하지만 매번 line 수를 세기에는 힘들고 복잡하니 처음부터 끝까지일 경우에는 1/-1을 적어주면 된다
-1 => 맨끝 이라는 의미이다
그럼 자동으로 -2는 맨끝에서 한칸 당긴 곳이 되는것이다
grid-column-start: 1;
grid-column-end: 5;
grid-column : 1/5
grid-column : 1/-1전부 동일한 결과를 가져온다
하지만 이것보다 편한 것은 바로 span을 사용하는 것이다.
2.span
span은 cell을 의미한다.=> (한 블럭)
grid-column: span 4를 적게 되면 4개의 블럭을 차지하라는 뜻이된다
spand를 사용하게 되면 자리 수를 헤아릴필요도 없고
내가 원하는 블럭만큼만 적용할 수 있기떄문에 매우편리하다
응용으로 gird-column : 2/ span 4 를 하게되면
2번째 행에서 시작하여 4개의 블럭을 차지라하라는 뜻이 된다
repeat(4, 100px)로 조정하였기 때문에 5번 맨 마지막 블럭은 100px이 아닌 body의 width 전체를 차지하게 된다.
3.line naming
각 라인에다가 원하는 이름을 지어줄 수 있다.
grid-template-columns:[first-line] 100px [second-line] 200px 등등..
repeat에 이름을 넣어주고 싶다면
repeat(4,100px [good-line])처럼 적어주면 된다.
grid-template-row : repeat(4,100px [good-line]) => 4개의 row라인의 이름은 good-line이 되는것이다.
하지만 repeat에 line-naming을 적용할 경우 뒤에서부터 naming을 시작하기 때문에
[good-line] 100px [good-line] 200px [good-line] 100px [good-line] 200px
형식으로 저장되는 것이 아닌
100px [good-line] 200px [good-linee] 100px [good-line] 200px [good-linee]
형식으로 저장된다
그렇기 때문에 내가 grid-row : 2/4 를 적용 할때는
grid-row : good-line 1 / good-line 3 형식으로 작성해야한다
