css grid 컨테이너에 들어갈 수 있는 속성들

grid를 선언하는 방법

그리드가 무엇인 지, 또 플렉스박스와 비교하는 포스팅을 작성할 때 그리드를 선언하는 방법과 트랙을 선언하는 코드를 작성했었습니다. 여기서 잠깐 다시 짚어보고 진행하도록 하겠습니다.

display의 값으로 grid를 주는 것이 그리드를 선언하는 방법이고, grid-template-rows와 grid-template-columns로 트랙을 선언할 수 있다고 했습니다. 그럼 형태에 일단은 트랙에 의해 생겨난 "그리드 셀"에 아이템(자식 엘리먼트)들을 하나씩 놓아둔다고 했었습니다. 이까지 기억나시나요? 트랙은 여러가지의 값을 줄 수 있습니다. 지금은 픽셀을 주었지만 그리드에서 사용할 수 있는 새로운 단위인 fr을 다루고 속성들을 다뤄보도록 하겠습니다.

새로운 속성 "fr" 배워보기 

픽셀은 고정된 값입니다. 상황에 따라서는 유동적인 값이 필요합니다. fr은 fraction(분수)의 줄인말입니다. 값으로 fr을 주면 총 fr 값을 합친 다음 비율만큼 공간을 배분합니다. grid-template-row에 1fr 2fr 1fr 이라는 값을 주었다고 가정해봅시다. 그럼 총 fr은 4니까 1fr에는 사용할 수 있는 공간의 1/4이 주어지고, 2fr인 트랙에는 사용할 수 있는 공간의 2/4가 주어집니다. 아주 간단하죠?

만약 픽셀과 같이 고정된 값과 함께 사용한다고 가정해보세요. 50px 1fr 2fr 50px 이라는 값을 주었을 때 사용할 수 있는 공간에서 고정된 값인 100px을 빼고 남은 공간을 1/3, 2/3로 나눠서 사용합니다.

아이템 사이에 gap 주기

아이템끼리 붙어있다면 공간을 넓혀줘야겠죠? 그럴 때 사용하는 값이 grid-gap입니다.

grid-gap이 적용된 아이템들

사진 속 상자들 사이에 공간이 생긴 것이 보이시죠? 사이의 값을 주면 이렇게 적용됩니다.

grid-gap: 가로선 사이즈 / 세로선 사이즈 형태로 주면 됩니다. 값을 하나만 주면 가로세로 모두 같은 값을 가집니다. 또 grid-row-gap과 grid-column-gap으로 따로 값을 줄 수도 있습니다.

line-name 지정하기

트랙은 두 개의 선 사이의 공간입니다. 트랙을 설정하고 나면 거기에 따라서 line들이 생깁니다.

생겨나는 선들을 도식화했습니다.

우리가 만든 그리드 박스에선 저런식으로 선들이 생겨났을 것입니다. 선을 통해서 grid-area와 같이 여러셀을 합치는 경우에 선을 통해서 작성하기도 하기 때문에 선에 대해서 아는 것이 중요합니다. 위에서 다뤘던 grid-gap은 첫번째 선이나 마지막 선은 건드리지 않고 그 사이에 있는 라인들에 굵기를 지정한 것입니다.

트랙을 설정할 때, 즉 grid-template-rows: [line-name] 1fr [line-name2] 1fr [line-name3] 와 같은 형태로 라인의 이름을 지정할 수 있습니다. 지정하는 것이 필수는 아니나 이름을 만들때는 -을 통해 연결하셔야 합니다. 하나의 라인이 여러개의 이름을 가질 수 있기 때문에 띄워쓰기를 쓰면 또 하나의 이름으로 인식합니다.

상자의 둘레선이 라인의 시작과 끝 부분이라는 것이 중요합니다. 라인을 사용할 때 헷갈릴 수 있기 때문에 꼭 기억해두세요.

아이템이 추가되는 방향 바꾸기

아이템이 추가될 때 또는 아이템이 정렬되는 방식은 일단은 가로로 추가된다는 것입니다. 그림들을 보면 가로로 추가한 뒤에 공간이 없으면 내려가죠? 이러한 방향을 바꾸는 방법은 grid-auto-flow의 값을 바꾸는 것입니다. 기본값은 row로 되어있습니다.

아이템 방향 바꾸기

위의 상자들은 column으로 값을 변경한 모습입니다. 이제는 상자가 아래로 놓아지다가 공간이 없으니 위로 올라가죠? 

기본값이 row로 되어 있어서 가로 공간을 다 채운뒤 아래로 내려가는 게 홈페이지의 일반적인 형태이다 보니 바꾸는 일은 많이 없습니다만, 만약을 위해서 알아두시면 됩니다.

가로나 세로에 값이 세로 더 들어가야할 때 사용하는 속성

만약에 우리가 설정한 공간보다 많은 아이템이 있게되면 어떻게 될까요? 그리드는 그 아이템을 어떻게 다뤄야할 지 몰라서 나타내지 않습니다. 간단한 예를 들자면 가로에 2개의 트랙, 세로에 2개의 트랙을 정의하면 총 4개의 아이템을 기본적으로 표현할 수 있죠. 그런데 아이템이 5개라면 나머지 한 개는 상자안에 나타나지 않는 것입니다. 이 때에 grid-auto-rows나 grid-auto-columns을 설정하면 표현할 공간이 부족할 때 기본적으로 채워주게 됩니다.

grid-auto-rows나 grid-auto-columns 모두 트랙사이즈를 값으로 가집니다.

이번 포스팅에서는 그리드에서만 있는 속성들을 다뤄봤습니다. 다음 포스팅에서는 flexbox와 비슷한 이름, 기능들의 속성을 다뤄보도록 하겠습니다.