css grid에서 아이템에게 적용하는 속성들

라인을 잘 기억해주셔야합니다.

그리드에 다루면서 라인에 대해서 설명했던 것을 기억하시나요? 아이템의 경우 어느 공간을 어느 정도 차지할 것인가 표시하는 것이 주로 사용하는 기능이기 때문에 라인을 기억해주는 것이 중요합니다.

해당 코드를 실행하면 아래와 같은 자주 보던 형태를 만들 수 있습니다.

코드를 보시면 grid-auto-rows를 설정해 놨기 때문에 칸이 모자라면 row를 1fr 크기로 만들게 됩니다. 이제 이 기본형태를 통해서 아이템을 여러 셀을 차지하도록 해보겠습니다.

grid-column과 grid-row를 통해서 차지하는 공간 늘리기

위의 상자는 column에 4개의 선이 있고, row에는 3개의 선이 있습니다. 그래서 시작선과 종료선을 값으로 주면 해당 선에 맞게 공간을 차지하게 됩니다.

grid-row를 사용했습니다.

변화가 느껴지시나요? 두번째 아이템에 "grid-row: 1 / 3"이라는 값을 주었습니다. 아이템2는 해당 공간을 차지했고, 나머지 아이템들은 뒤로 밀리게 됩니다. 공간이 모자라기 때문에 아이템 6은 밑으로 새칸을 만들면서 내려갔습니다. 

 

grid-column을 사용했습니다.

이번엔 두번째 아이템에 "grid-column: 2 / 4"라는 값을 주었습니다. 세로선 2번부터 4번까지 차지한 모습을 볼 수 있습니다. 

선의 시작과 끝을 지정하지 않고 "span 2"와 같은 형태를 값으로 주면 자기 위치에서 시작하고 해당 방향으로 2칸을 차지합니다.

단축형인 grid-area 알아보기

grid-row는 grid-row-start와 grid-row-end로 따로 값을 줄 수 있습니다. 또 이처럼 grid-column은 grid-column-start와 grid-column-end로 값을 따로 줄 수 있습니다. grid-row와 grid-column 자체가 하나의 단축형인 것이죠. 간편하게 사용하기 위해서 이 둘을 사용하는 단축형인 grid-area도 있습니다. 

grid-area는 row-start / column-start / row-end / column-end 의 순서로 값을 가집니다. 

span을 사용한다면 "grid-area: span 2 / span 2" 처럼 사용할 수도 있습니다. 이렇게 값을 줄 땐 row값이 span 2, column 값이 span 3입니다.

만약 공간이 겹친다면 어떻게 될까요? grid-area를 사용하다보면 공간이 겹쳐지게 될 수도 있습니다. 그리드는 이처럼 아무 문제 없이 공간을 쉽게 겹칠 수도 있습니다. 그 대신 더 뒤에 적용한 효과가 위로 나타납니다. 이때는 z-index를 통해서 위에 보일 것을 정할 수 있습니다.

하나의 아이템만 위치 조정하기

그리드 컨테이너에 justify-items와 align-items를 사용하면 모든 아이템에 효과가 적용되었습니다.

1번 아이템만 형태가 다릅니다.

위 그림은 아이템 1에 "justify-self: center"가 적용되어 있는 것입니다. 물론 align-self도 있습니다. "-self" 형태로 각 아이템들에게 따로 값을 지정할 수 있습니다.

단축형인 place-self도 있습니다. align-self와 justify-self 순서로 값을 받습니다.

아이템 순서 지정 해주기

기본적으로는 아이템은 순서대로 지정되어 있습니다. 이 때 아이템의 순서를 바꿔주려면 아이템에 order 값을 지정해주면 됩니다.

순서 바꾸기

아이템 3이 제일 먼저 나와있습니다. 이는 item 3에 "order: -1"이라는 값을 주었기 때문입니다. 기본적으로 각 아이템들은 0이라는 값을 가집니다. 그래서 젤 먼저 두려고 음수의 값을 준 것입니다. 1이라는 값을 준다면 아이템3이 젤 뒤로 이동하는 것도 확인할 수 있습니다.

왜 레이아웃을 짤 때 그리드를 사용하는 지 느껴지시나요? 이런 멋진 기능들이 있기 때문입니다. 그리드 아주 멋지지 않나요?