우리는 우리가 layout을 만들고자 할때, grid-column-start와 end를 정해 레이아웃을 만들 수 있었다.하지만 모든 요소마다 start와 end를 정해주기엔 너무 귀찮은 일들이 많아진다. 그렇기 때문에 shortcuts를 배울 것이다.

일단 첫번째,

grid-column : 1/2;

1은 시작을 의미하고 2는 끝을 의미한다. line의 첫번째와 2번째 줄까지 이 요소가 차지할 것이다.를 의미한다. 근데 만일 내가 차지하는 요소들이 너무 많아서 줄이 많을 땐 어떻게 해야하지? 하고 생각할 것이다. 그럴땐 어떻게 해야할까? 우리는 맨 첫번째 줄부터 1로 시작해서 세어나가는 걸 알고 있다. 하지만 우리는 요소를 거꾸로 세기도 한다. 거꾸로세면 맨 마지막 요소부터 -1로 시작해서 마지막엔 -x으로 끝난다. 그렇기 때문에 처음부터 맨끝까지 요소를 사용하고 싶은 거라면

이렇게 쓰면 처음부터 끝까지 차지할 수 있다. 이렇게 쓰고 나면 또 의문점이 들 수 있다. 그러면 줄을 하나하나 다 세야 한단 거네 ㅠ 귀찮다. 방법이 없나? 하고 다른 방법을 생각하게 될 것이다.

그럼 두번째, 우리는 줄을 세는 것보단 span을 통해 얼마나 많은 cell을 가지고 있는 지를 적어주는 것을 통해 더 간단하게 layout을 만들 수 있다.

span요소가 4개의 cell을 가지고 있다. 라고 적어주면 앞서 썼던 내용들과 똑같은 결과가 나온다.

또한 복합적으로 섞어서 사용할 수도 있다.

우리가 이 방법을 쓰는 이유에는 한가지 이유가 더 있다.

2번째 줄을 보자 파란색 보라색이 같은 요소에 있다. 하지만 이 둘은 같은 줄에서 시작하기 때문에, 2/3이라고 써줄 수가 없다 ㅠ. 왜냐면 2번째 줄이 겹치기 떄문이다. 하지만 grid-row:span 2 라고 적으면 두번째 line이 겹칠 이유가 없다. 너무 좋은 기능이다~