AAtomic CSS

column-span

멀티 컬럼 레이아웃에서 요소가 모든 컬럼을 가로지르도록 설정합니다. 전체 너비 제목이나 구분선을 만들 때 유용합니다.

클래스 목록

클래스CSS설명
csacolumn-span: all모든 컬럼을 가로질러 전체 너비로 표시

시각 데모

아래 상자는 실제 다단 본문입니다. 가운데 소제목에만 가로지르기 클래스가 붙어 있어 단을 가로질러 폭 전체를 차지하고, 본문은 그 위아래로 나뉘어 흐릅니다.

다단 본문의 첫 부분입니다. 글이 한 단을 채우면 옆 단으로 이어지며, 아래 소제목을 만나기 전까지 이 흐름이 계속됩니다.

단을 가로지르는 소제목

소제목을 지나면 흐름이 새로 시작됩니다. 가로지르는 요소는 문서를 위아래 두 덩어리로 끊어 놓기 때문입니다.

사용 예시

멀티 컬럼 레이아웃 안에서 특정 요소(제목, 배너 등)를 전체 너비로 표시할 때 사용합니다.

<!-- Full width title within column layout -->
<div class="cw200px cg2rem">
  <p>The first paragraph is placed within columns.</p>
  <h2 class="csa">This title spans across all columns</h2>
  <p>Subsequent paragraphs are split into columns again.</p>
  <p>Multi-column layout continues.</p>
</div>

클래스별 상세

csacolumn-span: all

요소를 모든 단에 걸쳐 폭 전체로 배치합니다. 다단 본문 중간의 소제목, 인용구, 이미지 배너, 구분선에 씁니다. 이 요소를 기준으로 앞의 내용과 뒤의 내용이 각각 따로 단에 채워지므로, 문서를 의미 단위로 끊는 역할도 합니다.

<!-- Divider that spans the columns and restarts the flow -->
<div class="cw25rem cg3-2rem">
  <p class="fs14px c71717A lh1-7">Intro paragraph flowing in columns.</p>

  <hr class="csa bn h1px bg27272A my2rem" />

  <p class="fs14px c71717A lh1-7">Everything after the rule starts a new column group.</p>
</div>

실전 예시 — 뉴스레터 본문

다단으로 흐르는 뉴스레터 본문 사이에 전체 폭 소제목과 인용 카드를 끼워 넣는 구성입니다. 가로지르는 요소가 섹션 구분자 역할을 합니다.

<article class="cw25rem cg3-2rem p3-2rem bg18181B br8px">
  <h1 class="csa fs3-2rem fw800 cFAFAFA lh1-3 mb16px">This week in Atomic</h1>

  <p class="fs14px c71717A lh1-7 mb16px">Two new utility groups landed, plus a
     smaller build for the prebuilt stylesheet.</p>
  <p class="fs14px c71717A lh1-7 mb16px">The docs site now ships per-class detail
     sections for every property page.</p>

  <blockquote class="csa bl4pxsolid6366F1 pl16px py12px my2rem">
    <p class="fs16px cFAFAFA lh1-6">Spanning elements double as section dividers.</p>
  </blockquote>

  <p class="fs14px c71717A lh1-7">Copy after the quote starts a fresh column group,
     so the sections never bleed into each other.</p>
</article>

팁 / 주의사항

가로지르는 요소는 흐름을 끊는다

가로지르는 요소 앞의 내용과 뒤의 내용은 서로 다른 단 묶음이 됩니다. 앞부분이 짧으면 위쪽 단들이 절반만 차 있는 상태로 남을 수 있습니다.

float나 절대 위치와는 함께 쓰지 말 것

가로지르기는 일반 흐름 안에 있는 블록에만 적용됩니다. 절대 위치 요소나 뜬 요소에서는 무시되므로 배치가 예상과 달라집니다.

none 값은 클래스가 아니라 기본 상태다

다단 안의 요소는 지정하지 않으면 이미 가로지르지 않는 상태입니다. 되돌리고 싶다면 클래스를 붙이는 것이 아니라 붙였던 클래스를 떼면 됩니다.

다단 컨테이너 안에서만 의미가 있다

부모에 컬럼 너비나 컬럼 개수가 지정되어 있지 않으면 아무 일도 일어나지 않습니다. 효과가 안 보인다면 이 요소가 아니라 부모부터 확인하세요.

중첩된 다단에서는 가장 가까운 컨테이너만 가로지른다

다단 안에 다시 다단을 넣은 경우 안쪽 컨테이너 폭까지만 가로지릅니다. 바깥 레이아웃 전체를 덮을 것이라 기대하면 안 됩니다.

column-span은 all 또는 none만 지원

CSS 스펙상 column-span은 개별 컬럼 수를 지정할 수 없습니다. 모든 컬럼을 가로지르거나(all), 가로지르지 않거나(none) 둘 중 하나입니다.

콘텐츠 흐름이 중단됨

csa 요소 앞뒤로 컬럼 콘텐츠가 나뉘어 배치됩니다. 레이아웃이 예상과 다를 수 있으니 확인하세요.

column-widthcolumn-rule-widthcolumn-fillcolumn-gap