[CSS] 다단 레이아웃과 column-count, column-width

다단 레이아웃을 잡는 방법에 대해 살펴보다가 column을 찾게 되었다. 마치 그리드처럼 열을 설정 가능하고, 반응형으로 일부 열을 줄일 수도 있는 좋은 기능 같다.

그런데, flex나 grid와 기능과 역할이 많이 겹치는데 왜 이런 것이 있는 걸까.

 

• 호환성 및 구형 브라우저 지원 | column 기능은 flex나 grid가 등장하기 전에 나왔다. 초기 css의 다단 레이아웃을 잡는데 있는 역할이었고 모던 브라우저로 넘어오면서 자연스레 flex나 grid로 대체된 것으로 추측된다. 따라서 구형브라우저의 지원을 위해 사용될 수도 있다.
• 단순함 | column 기능은 설정이 간편하고 열 간에 높이를 자동으로 맞춰주려 한다.

 

📘 사용 방법

세 가지 속성을 사용한다.

• column-count | 열의 최대 갯수, 
• column-width | 열의 최소 너비
• column-gap | 열 간의 공백
• column-count만 사용할 시, 작은 화면에서는 자식이 부모를 overflow하는 문제가 발생한다. column-width로 최소 너비를 설정해주면, 대상이 이 너비를 유지하지 못할 시 열을 줄인다.
• column-width만 사용할 시, 이 최소 너비에 맞춰서 최대한 많은 열을 생산한다.

 

 

솔직한 감상으로는 아직 어떻게 사용할지 감이 잘 안잡힌다. flex는 1차원 레이아웃에서 유용하지만 2차원에서는 wrap이 생각보다 불편하다. grid는 2차원 레이아웃을 잡을 때 유용하지만, 호환성이 우려된다. 그러면 구형 브라우저의 대체 수단 정도로만 기억하고 있자.

 

참조
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts