2026-css-column-rule

CodeGridの記事「CSSのcolumn-ruleとGap Decorations」（全3回）のデモです。

デモ一覧

第1回 column-ruleの基本

ファイル 内容
multicol-basic.html 3段組みの段間に線を引く
multicol-gap.html column-gapとcolumn-rule-widthの関係
multicol-rule-space.html カスタムプロパティで線の太さと間隔を管理する

第2回 CSS GridとFlexboxで区切り線を引くcolumn-ruleとrow-rule

ファイル 内容
flex-tags.html 折り返すタグリストの区切り線（borderとの比較）
grid-rule.html column-rule、row-rule、ruleの引かれ方
grid-rule-break.html rule-breakによる交点の扱い（CSS GridとFlexboxの比較）

第3回 線の見え方を作り込むrule-visibility-itemsとrule-inset

ファイル 内容
grid-cards.html rule-visibility-itemsによる空いている領域への線の出し方
grid-inset.html rule-insetによる線の端の調整
list-repeat.html gapごとに違う線を引く

動作環境

段組みのデモ（multicol- で始まる3点）は、すべてのブラウザで動作します。

それ以外のデモはCSS Gap Decorationsを使っているため、対応ブラウザ（Chrome / Edge 149以降）が必要です。非対応のブラウザで開いた場合は、ページ上部にその旨を表示します。

ファイル構成

各デモは1ファイルで完結しています。共通のスタイルのみ style.css にまとめています。