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

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

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

	<style>
	.container {
	height: 250px;
	background-color: rgba(0, 0, 0, 0.4);
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	padding: 10px;
	grid-gap: 6px;
	}
	</style>
	<!-- 아이템이 6개 있습니다. -->
	<div class="container">
	<div class="item">item 1</div>
	<div class="item">item 2</div>
	<div class="item">item 3</div>
	<div class="item">item 4</div>
	<div class="item">item 5</div>
	<div class="item">item 6</div>
	</div>

view raw index.html hosted with ❤ by GitHub

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

코드를 보시면 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이 젤 뒤로 이동하는 것도 확인할 수 있습니다.

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