2026-css-column-rule

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

• 記事: https://www.codegrid.net/series/2026-css-column-rule/
• デモ: https://codegrid.github.io/2026-css-column-rule/

デモ一覧

第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 にまとめています。