column-rule-width
Sets the thickness of the rule drawn between columns in a multi-column layout. The rule is painted down the middle of the column gap, and it only becomes visible once column-rule-style is set.
Class Patterns
| Pattern | Example | CSS |
|---|---|---|
| crw{N}px | crw1px | column-rule-width: 1px |
| crw{N}px | crw2px | column-rule-width: 2px |
| crw{N}px | crw4px | column-rule-width: 4px |
Live Demo
This demo shows the single most common trap as it actually renders. The block above carries crw4px and yet no line appears.
crw4px only
No line. column-rule-style was never set.
what a 4px rule looks like
A 4px divider faked with a border. Add a style and the block above looks like this.
<!-- Width alone paints nothing: column-rule-style defaults to none -->
<div class="cw16rem cg4rem crw4px">...</div>
<!-- What the rule would look like, faked with a border -->
<div class="df gap4rem">
<div class="fg1 fb0 br4pxsolid38BDF8 pr4rem">...</div>
<div class="fg1 fb0">...</div>
</div>Class Details
crw1pxcolumn-rule-width: 1px
The most common weight. In dense body text a hairline separates the columns without competing for attention.
<!-- Hairline divider, the usual choice for dense text -->
<div class="cw20rem cg4rem crw1px">
<p>Column rule width is measured in the gap, not added to it.</p>
</div>crw2pxcolumn-rule-width: 2px
Use it where 1px looks too faint against larger type. Even 2px still reads as a thin line on high-DPI screens.
<!-- Slightly heavier divider for larger type -->
<div class="cw24rem cg4rem crw2px">
<p>A 2px rule still reads as a hairline on high-DPI screens.</p>
</div>crw4pxcolumn-rule-width: 4px
An editorial, newspaper-weight divider. The heavier the rule, the more column-gap it needs so the text does not crowd against it.
<!-- Editorial divider. Keep the gap comfortably wider than the rule -->
<div class="cw28rem cg4rem crw4px">
<p>A 4px rule needs a generous column-gap to breathe.</p>
</div>Practical Example
column-rule-width needs column-rule-style for the line to show. Shorthand column-rule is more common.
<!-- 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>Heavier rules work particularly well in dense blocks such as footnotes or reference lists.
<!-- Newspaper-style footnote block. The gap is wide enough that a
4px rule sits in the middle without crowding either column. -->
<section class="cw24rem cg4rem crw4px maxw96rem mxa">
<h3 class="fs2rem fw700 cFAFAFA mb16px">References</h3>
<p class="fs13px c71717A lh1-8 mb16px">... entry one ...</p>
<p class="fs13px c71717A lh1-8 mb16px">... entry two ...</p>
<p class="fs13px c71717A lh1-8 mb16px">... entry three ...</p>
</section>Tips and Pitfalls
column-rule-style required
Width alone will not show the rule, because column-rule-style defaults to none. Atomic has no class for the style, so you must set it in your own project CSS.
The rule does not widen the gap
The rule is painted inside the column gap and takes up no space of its own, so a rule thicker than the gap will run into the text on both sides. Always keep the gap comfortably larger than the rule.
The thin, medium, and thick keywords also exist
The spec allows the same keywords as border-width, but their pixel values differ between browsers. Use explicit pixel values when you want predictable output.
It only appears once there really are multiple columns
If the container is too narrow to produce more than one column, there is no gap and therefore no rule. Check that your cw or column count actually yields two or more columns.