[CSS] Grid를 사용할 때 장점 하나

1. Grid를 사용하지 않을 때 어려운 레이아웃

웹퍼블리셔라면 grid를 사용할 줄 몰라도 한 번쯤 들어는 봤을 것이다.

grid가 좋다고는 하는데 과연 어디에 좋은 것일까?

grid를 왜 배워야하는지 의문이 드는 사람들을 위해 짧게 글을 쓴다.

 

디자이너의 시안에 따라 퍼블리싱을 할 때 다음과 같은 레이아웃이 있다고 하자.

 

시안 A

 

만약 이것을 코딩한다면 몇 가지 방법이 있겠지만 그중 아래처럼 코딩할 수 있다.

 

See the Pen Gird Layout 없이 by lpla (@lpla) on CodePen.

 

A, B, C, D는 모두 같은 box 클래스를 가지지만 우측에 있는 B, C, D는 wrapper 클래스로 한 번 더 감쌌다.

A와 wrapper를 수평 정렬하기 위해서다. 따라서 부모 container에 display: flex 속성을 부여했다.

이제 시안과 동일한 레이아웃이 완성됐다.

 

 

그런데 며칠 뒤 반응형 Mobile 시안이 나왔고 Mobile에서는 다음과 같은 레이아웃이 되도록 해달라고 한다.

 

PC에서는 B, C, D가 wrapper에 감싸여 있지만 Mobile에서는 wrapper 중간에 A가 끼어들게 된다.

html 구조를 모두 뜯어고치지 않는 이상 A를 B와 C 사이에 넣기란 쉽지 않다.

그럼에도 이렇게 코딩 해야 한다면 자바스크립트까지 사용해서 구현할 수는 있지만 깔끔한 방법은 아니다.

자바스크립트를 사용한 코딩은 아래와 같다.

 

See the Pen Grid를 사용하지 않을 때 문제점 (2) by lpla (@lpla) on CodePen.

 

하지만 Grid를 사용하면 쉽게 해결할 수 있다.

 

 

2. Grid를 사용한 레이아웃

 

See the Pen Grid를 사용할 때 레이아웃 by lpla (@lpla) on CodePen.

 

Grid 레이아웃을 사용하게 되면 wrapper 없이 A, B, C, D를 각각의 위치에 배치할 수 있고 따라서 Mobile에서 이동도 자유롭다.

Grid는 정말 쉽다. 이미 구글에 많은 사람들이 올린 강의가 있는데 1시간이면 대부분을 배울 수 있다.

글로 된 강의가 지루하다면 게임으로 배울 수도 있다.

 

하지만 Grid는 익스플로러에서 지원하지 않기 때문에 익스플로러의 중요도에 따라서 사용하고 말고를 결정하면 되겠다.

당연히 많은 회사에서는 "우리는 grid 레이아웃을 사용해서 홈페이지를 만들어요!" 보다 "우리는 ie도 지원하는 홈페이지를 만들어요!" 를 훨씬 선호하기 때문에 나는 실전에서 Grid를 사용할 수 없다.

하지만 2022년 6월에 지원 종료된다고 하니 내용은 알아뒀다가 바로 써먹을 수 있게 준비해둬야겠다.