AAtomic CSS

column-width

멀티 컬럼 레이아웃에서 각 컬럼의 이상적인 너비를 설정합니다. 브라우저는 사용 가능한 공간에 맞춰 자동으로 컬럼 수를 결정합니다.

클래스 패턴

패턴예시CSS
cw{N}pxcw200pxcolumn-width: 200px
cw{N}pxcw150pxcolumn-width: 150px
cw{N}remcw20remcolumn-width: 20rem
cw{N}remcw30remcolumn-width: 30rem

시각 데모

아래 두 문단 상자는 글도 같고 폭도 같습니다. 다른 것은 컬럼 너비 값 하나뿐이며, 브라우저가 그 값에 맞춰 단 수를 스스로 정합니다. 창 크기를 줄였다 늘리면 단이 붙었다 떨어지는 것도 확인할 수 있습니다.

cw200px cg2rem

여기는 여러 단으로 흐르는 본문입니다. 멀티 컬럼은 인쇄물처럼 글이 한 단을 채우면 다음 단으로 이어집니다. 단의 개수를 직접 지정하지 않아도 컨테이너 폭에 따라 자동으로 늘고 줄어듭니다.

그래서 반응형 작업에서 미디어 쿼리 없이도 자연스러운 다단 본문을 만들 수 있습니다. 단, 글이 길어지면 세로로도 길어지므로 높이를 제한할지 미리 정해 두는 편이 좋습니다.

좁은 단이라 넓은 화면에서 여러 단으로 갈라집니다.

cw25rem cg2rem

여기는 여러 단으로 흐르는 본문입니다. 멀티 컬럼은 인쇄물처럼 글이 한 단을 채우면 다음 단으로 이어집니다. 단의 개수를 직접 지정하지 않아도 컨테이너 폭에 따라 자동으로 늘고 줄어듭니다.

그래서 반응형 작업에서 미디어 쿼리 없이도 자연스러운 다단 본문을 만들 수 있습니다. 단, 글이 길어지면 세로로도 길어지므로 높이를 제한할지 미리 정해 두는 편이 좋습니다.

단 하나가 넓어 같은 폭에서도 단 수가 적습니다.

사용 예시

컬럼 너비만 지정하면 브라우저가 자동으로 컬럼 수를 계산합니다. 신문 레이아웃이나 텍스트 다단 배치에 유용합니다.

<!-- 200px reference auto columns -->
<div class="cw200px cg2rem">
  <p>First paragraph. The browser automatically determines column count based on available space.</p>
  <p>Second paragraph. If the container is wide, it splits into multiple columns.</p>
  <p>Third paragraph.</p>
</div>

<!-- Using rem units -->
<div class="cw25rem cg16px">
  <p>Auto-arranged with 250px reference column width.</p>
</div>

클래스별 상세

cw200pxcolumn-width: 200px

픽셀 단위로 단 너비를 지정합니다. 값이 작을수록 같은 폭에서 더 많은 단이 생깁니다. 본문 글에서는 한 줄에 대략 마흔에서 예순 글자가 들어가는 폭이 읽기 좋으므로 그 근처의 값을 고르는 것이 좋습니다.

<!-- Dense list: many narrow columns on wide screens -->
<ul class="cw200px cg2rem">
  <li class="fs14px c71717A">Seoul</li>
  <li class="fs14px c71717A">Busan</li>
  <li class="fs14px c71717A">Incheon</li>
  <li class="fs14px c71717A">Daegu</li>
  <li class="fs14px c71717A">Gwangju</li>
</ul>

cw25remcolumn-width: 25rem

rem 단위로 단 너비를 지정합니다. 이 문서의 기준에서 1rem은 10px이므로 25rem은 250px입니다. 사용자가 글자 크기를 키우면 단 너비도 함께 커지므로 접근성 측면에서 더 안전한 선택입니다.

<!-- Article body: columns grow with the user's font size -->
<div class="cw25rem cg3-2rem crw1px">
  <p class="fs14px c71717A lh1-7">First paragraph of the article.</p>
  <p class="fs14px c71717A lh1-7">It keeps flowing into the next column.</p>
</div>

실전 예시 — 공지 본문과 태그 목록

긴 공지 본문을 다단으로 흘리고, 그 아래 태그 목록은 좁은 단으로 촘촘히 배치하는 조합입니다. 같은 속성이지만 값에 따라 완전히 다른 밀도를 만들 수 있습니다.

<article class="p3-2rem bg18181B br8px">
  <h2 class="csa fs2-4rem fw700 cFAFAFA mb16px">Service notice</h2>

  <!-- Long copy: wide, readable columns -->
  <div class="cw25rem cg3-2rem mb3-2rem">
    <p class="fs14px c71717A lh1-7 mb16px">Scheduled maintenance runs on Saturday.</p>
    <p class="fs14px c71717A lh1-7">Sessions are preserved and no data is lost.</p>
  </div>

  <!-- Short items: narrow, dense columns -->
  <ul class="cw200px cg2rem">
    <li class="fs13px cA1A1AA">api</li>
    <li class="fs13px cA1A1AA">dashboard</li>
    <li class="fs13px cA1A1AA">billing</li>
    <li class="fs13px cA1A1AA">webhooks</li>
  </ul>
</article>

팁 / 주의사항

최소 너비가 아니라 목표 너비다

컨테이너가 지정한 값보다 좁아지면 단이 사라지고 하나로 합쳐지면서 그 너비는 무시됩니다. 지정한 값보다 좁은 단이 절대 나오지 않는다고 가정하면 안 됩니다.

단 수를 못 박고 싶다면 이 속성이 아니다

화면 폭과 무관하게 항상 두 단이어야 한다면 column-count 쪽이 맞습니다. 두 속성을 함께 쓰면 지정한 개수가 상한이 되고 너비는 참고값이 됩니다.

높이를 제한하지 않으면 단이 안 생긴 것처럼 보인다

내용이 짧으면 첫 단만 채우고 끝나므로 다단으로 보이지 않습니다. 데모나 카드에서는 높이나 글 분량을 충분히 확보해야 효과가 드러납니다.

단을 가로지르는 요소는 따로 지정해야 한다

제목이나 배너가 단 하나에 갇히는 것이 싫다면 그 요소에 column-span 클래스를 붙이세요. 붙이지 않으면 다른 본문과 똑같이 한 단 안에서 흐릅니다.

단 사이 간격과 구분선은 별개 속성이다

단 사이가 너무 붙어 보인다면 간격 클래스를, 신문 같은 세로 구분선이 필요하다면 구분선 두께 클래스를 따로 지정해야 합니다.

이상적인 너비이지 최소 너비가 아님

column-width는 "이상적인" 너비를 지정합니다. 컨테이너가 좁으면 하나의 컬럼으로 줄어들고, 넓으면 여러 컬럼이 생깁니다.

column-gap과 함께 사용

컬럼 사이의 간격은 cg(column-gap) 클래스로 제어하세요.

column-rule-widthcolumn-spancolumn-fillcolumn-gapgap