css의 그리드(grid)를 알아봅시다.

그리드는 무엇이고, 어떨 때 사용될까요?

grid는 display 속성의 값 중 하나입니다. 레이아웃을 짜는데 사용되기 위해 만들어졌습니다. 

.container {

display: grid;

}

위와 같은 형태로 선언하기만 하면 쉽게 사용할 수 있습니다. 왜 그리드가 만들어졌고, 레이아웃을 짜는데 사용하기 좋다고 할까요? 그러한 대답은 css의 flexbox와의 비교를 통해서 더 쉽고, 정확하게 알 수 있습니다. 이번 포스팅은 flex 박스와의 비교를 통해서 그리드에 대해서 좀 더 알아보고 미리 알아두셔야 할 용어와 개념들을 설명해보겠습니다. 그리고 그 다음에 그리드가 주어지는 부모에는 어떤 속성들이 따라오는지, 또 자식 엘리먼트에는 어떤 속성들을 줄 수 있는 지를 이어서 포스팅하도록 하겠습니다.

flexbox와의 비교

많은 것들이 필요에 의해서 만들어 졌습니다. 예전에는 레이아웃을 테이블 태그를 통해서 짰다고 합니다. 왜 그랬을 지는 이해가 갑니다. 그 안에 배치하기가 쉬울 뿐더러, 빠르고 그렇게 해도 별 문제가 없었기 때문이겠죠. 지금은 어떤가요? 표준이라는 것이 생기고 테이블로 레이아웃을 짜는 것은 표준과는 거리가 멀었기 때문에 없어졌고, 그냥 열심히 비율을 맞춰서 레이아웃을 짜는 수밖에 없었습니다. 그 뒤에 생겨난게 css에 float 속성입니다. 말 그대로 뜨다는 의미입니다. 그렇게 왼쪽 또는 오른쪽 가운데로 띄우는 형태로 레이아웃을 맞췄습니다. 여러 디자인이 생기면서 한계를 많이 느끼고, 생겨난 것이 flexbox입니다. 

간략히 작성하면 flexbox의 코드는 이러한 형태를 가지게 됩니다. 이러면 item들을 "손쉽게" 옮길 수 있게됩니다. 하지만 동시에 flex 박스는 "1차원적"이라는 한계가 있습니다. 왜 1차원적이라고 표현할까요?

해당 코드에 생략되는 부분들이 있습니다. 기본적으로 flex를 설정하면 flex-direction의 값은 row가 됩니다. 즉 가로 한 줄로 아이템들을 배치합니다. 플렉스 방향이 (기본값이) 가로이기 때문에 주축(justift-content로 이동하는 부분)은 가로로 되고 교차축(align-items로 이동하는 부분)은 세로가 됩니다. 그리고 여러 줄이 생기더라도 이러한 값은 바뀌지 않습니다.

위와 같은 코드가 있다면 아이템들이 어떻게 배치될까요?

아이템이 배치될 모습입니다.

아이템들의 합친 길이가 길어서 4와 5는 밑 줄로 내려갔지만 그 줄도 justify-content의 값을 그대로 이어받습니다. 그래서 그 줄에 있는 4와 5가 위와 같은 형태로 배치되게 됩니다. 다같이 주축과 교차축의 값을 이어받고, 한 줄(가로나 세로로되어 있는 아이템들)을 적당한 공간을 가지도록 배치해줍니다. 이러한 것들이 flex의 특성이면서 1차원적이라고 표현되는 점입니다. 

grid가 2차원적이라는 이유

위에서 플렉스의 1차원적인 점을 얘기했습니다. 그리드는 그럼 어떻게 배치할까요? 일단 그리드를 선언하면 column과 row 값을 주어야 합니다.

위와 같은 코드가 있다면 어떻게 보여질까요?

코드로 통해 보여질 화면입니다.

해당 형태로 그려집니다. 그리드를 선언하면 우선 column과 row값을 준다고 했죠? 그러면 거기에 맞춰서 "트랙"이 만들어집니다. 그리고 트랙에 의해서 생긴 "셀"에 아이템들이 일단 하나씩 배치됩니다. 이렇게 하는 것은 일단 임시로 아이템을 놓아두는 것이라고 생각하세요. 그리고 후에 값을 줘서 배치는 어느 칸을 얼마나 차지할 지, 또는 어디에 위치할 지에 따라 자유롭게 배치할 수 있습니다. 여러개의 셀을 합쳐서 배치하는 것은 그리드 에어리어(grid area)를 만드는 것입니다. 플렉스에서처럼 하나의 줄(아이템들)을 이동시키는 것이 아니라 가로 세로 트랙을 만들고, 그 안에서 아이템들을 넓히거나 이동시키거나 하는 것이죠.

그리드 구조 도식

그림으로 보니 용어에 대해서 좀 더 쉽게 이해하실 수 있지 않나요? 그리드가 레이아웃을 짜는데 강점이 있고, 필수적이라고 표현되는 것은 이러한 유연성과 자유로움에 있다고 할 수 있습니다. 

플렉스와의 차이점과 그리드의 필요성에 대해서 느껴지시나요?

다음 포스팅에서는 부모 컨테이너에 어떤 속성들이 올 수 있는 지 정리해보도록 하겠습니다.