저번 편에서 발단에 대해 설명 드렸다. 이번 편부터는 본격 그리드에 대한 고찰에 대한 시간이다. 그래서 기존html에서는 플렉스 랩을 통해 이미지 파일을 배치 시켰었다.
이렇게 하나의 컨테이너 안에 이미지를 배치시키고 각각의 이미지 컨테이너 안에서 플렉스 랩으로 자동적으로 맞춰지는 방식이었다.
그런데, 이 방법 말고도 다른 3세대 방식이 있다는 것을 다른 동기에게 있다고 들었다.
그 이름은 바야흐로 css GRID
그렇다. 우리가 보통 한국어로 번역하면 나오는 그 그리드 격자무늬~ 그것이 맞다. 이 방법이 2차원적 방식이고, 훨씬 상황에 따라 좋다는 것을 알게 되었다. 그렇게 나의 그리드에 대한 고찰이 시작되었다.
물론 처음에는 그리드에 대한 이해가 전무해서 너무 힘들었다. 하지만, 생각보다 진입장벽이 엄청나게 내가 할 수 있는 단순한 배치 수준에서는 어렵지 않음을 깨달았다.
1. grid와 flex의 차이점
Flex와 지금 공부할 Grid의 큰 차이점은
Flex는 한 방향 레이아웃 시스템이고 (1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)
이라는 점이다.
즉, 둘의 차이는 Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있다. 그래서 우리가 알듯이 플렉스의 경우, flex-direction의 경우로 먼저 column(세로)로 다닐 지 아니면, row(가로)로 다닐 지에 대해 먼저 정해야 한다. 그 이후 해당 열 혹은 행에서 어떻게 움직이고 배치될 지 움직임에 대해 정해줄 수 있다.
그렇다면 이렇게 움직이는 것에 대해서 제약은 없을까?
분명 있다. 이러다보니 1차원적으로밖에 움직이지 못 한다. 그 얘기가 무엇이냐하면, 바로 어떤 특정 위치에 딱 뭔가 레이아웃 하나를 주고 싶은데... 플렉스를 쓰면 그렇게 하기가 힘들다. 물론 할 수는 있지만, 상당히 신경써야할 부분이 많다. 이런 단점을 보완하기 위해서 개발자들이 구현해 낸 것이 바로 그리드다!
그에 비해 Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있다.
즉, 그리드는 이러다 보니, 격자 배열을 통해 해당 위치에 특정한 레이아웃을 줄 수 있다.
아래의 그림을 통해 이해가 되길 바란다.
가장 아래 both directions가 바로 그리드의 양방향 작동 방식이다. 그래서 그리드는 배치 구조만 개발자가 잘 짠다면 충분히 훨씬 사용하기 편하고 자유로운 도구라는 생각이 들었다.
다음편에서는 그리드에 대한 세부 사항과 사용법에 대해 더 탐구해 보겠다.
------------------다음편에서 계속---------------------------
