📏

CSS Gap Decorations

row-rule/column-ruleでギャップに線を描く

グリッドやフレックスボックスのアイテム間のギャップ領域に視覚的な区切り線を入れたい場合、従来はborderやpseudo-elementで回避する必要がありました。Gap Decorations仕様はrow-ruleとcolumn-ruleプロパティでこの問題をネイティブに解決します。

Chrome 139以上で実験フラグを有効にすると利用でき、テーブルマークアップなしでクリーンな区切りレイアウトを実現できます。

従来multi-columnでしか使えなかったcolumn-ruleがFlexbox、Gridでも使えるようになりました。

.my-grid-container {
  display: grid;
  gap: 2px;
  column-rule: 2px solid pink;
}

.my-flex-container {
  display: flex;
  gap: 10px;
  row-rule: 10px dotted limegreen;
  column-rule: 5px dashed coral;
}

.my-container {
  display: grid;
  gap: 2px;
  row-rule:
    repeat(2, 1px dashed red),
    2px solid black,
    repeat(auto, 1px dotted green);
}

ブラウザサポート（2026年）

Chrome/Edge 139+でフラグ有効化が必要：about://flags → Experimental Web Platform Features。Grid、Flexbox、Multi-column、Masonry全てで標準化進行中。

適用方法

Chrome 139+の実験フラグCSSGapDecorationsを有効にする

グリッド/フレックスコンテナにcolumn-ruleまたはrow-ruleプロパティを追加する

線のスタイル（solid, dashedなど）、色、太さを指定する

既存のborderベースの回避コードを削除して整理する

ダッシュボードカードグリッド間の区切り線挿入料金比較テーブルの代替レイアウト実装