AAtomic CSS

column-rule-width

멀티 컬럼 레이아웃에서 컬럼 사이에 그려지는 구분선(rule)의 두께를 설정합니다. column-rule-style이 지정되어야 보입니다.

클래스 패턴

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴예시CSS
crw{N}pxcrw1pxcolumn-rule-width: 1px
crw{N}pxcrw2pxcolumn-rule-width: 2px
crw{N}pxcrw4pxcolumn-rule-width: 4px

사용 예시

column-rule-width는 column-rule-style과 함께 사용해야 선이 보입니다. 축약형 column-rule로 한 번에 지정하는 것이 일반적입니다.

<!-- 1px divider -->
<div class="cw200px crw1px cg2rem">
  <p>A 1px divider is displayed between columns.</p>
  <p>column-rule-style must also be specified.</p>
</div>

<!-- Thick divider -->
<div class="cw200px crw4px cg2rem">
  <p>A 4px thick divider.</p>
  <p>Can be used for newspaper-style layouts.</p>
</div>

팁 & 주의사항

column-rule-style 필수

width만 지정하면 구분선이 보이지 않습니다. column-rule-style(solid, dashed 등)이 함께 설정되어야 합니다.

column-widthcolumn-spancolumn-fill