AAtomic CSS

column-span

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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>

팁 & 주의사항

column-span은 all 또는 none만 지원

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

콘텐츠 흐름이 중단됨

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

column-widthcolumn-rule-widthcolumn-fill