flex vs grid (22.09.25 TIL)

 주말 강의 영상을 듣던 중 아샬 님이 요즘은 flex 보다는 grid layout 을 많이 쓴다는 얘기를 하셨다. 나는 flex 만 써보고 grid는 써 본 적이 없어서 정리 겸 til을 쓴다. 

 먼저 둘의 차이는 이렇다.

• flex 는 1차원적으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있다. (한 방향 레이아웃 시스템)
• grid는 2차원적으로 수평, 수직 영역을 동시에 나눌 수 있다. (두 방향, 가로-세로 레이아웃 시스템)

사진으로 보면 이런 느낌이다.

 grid 에서 2차원적으로 수평, 수직을 동시에 나눌 수 있다고 한 것은 행과 열을 지정할 수 있다는 얘기가 된다. grid-template-columns 속성을 이용하여 행을 지정할 수 있고, grid-template-rows 속성을 이용하여 열을 바꿀 수 있다.

<div style="display:grid; grid-template-columns: 1fr 1fr; grid- template-rows: 10px 10px;"></div>

 행과 열을 지정할 때 fr을 이용해서 비율 형태로 줄 수도 있고, px를 이용해 단위 형태로 줄 수도 있다.

 반면 flex 는 태그 안에 있는 item 들의 방향을 결정하는데, defalut는 row로 되어있다. column으로 바꾸기 위해서는 flex-direction을 column으로 바꿔야 한다.

<div style="display:flex;flex-direction:column;"></div>

 레이아웃의 기본은 분할이다. 보통 박스를 그리고 선을 그어가며 영역을 나눌 때, 영역이 2개 이상으로 분리가 되면 진행방향이라는 것이 생긴다. 이렇게 선을 그어서 분리된 개별 박스를 content 라고 하고, 이 content를 묶어주는 것을 container라고 한다. grid는 컨테이너이고 flex는 콘텐츠이다. flex 가 개별 박스 요소를 만든다면, grid는 이 요소들이 모인 컨테이너 전체를 제어한다. 

 만약 수정이 잦은 경우라면 flex 로 개별 요소를 건드는 것이 나을 것 같고, 전체 레이아웃이 명확하게 정해져 있어서 추후 수정할 일이 많지 않을 것 같다면 grid를 쓰면 되지 않을까.. 이것도 직접 내가 써 봐야 어떤 것이 더 적합할지 선택할 수 있을 것 같다.