はじめに
GridやFlexboxでレイアウトを組むとき、「列や行の間に区切り線を入れたい」と思ったことはありませんか？
これまでは疑似要素や余分なDOM要素を駆使して実現するしかなく、レスポンシブ対応が複雑になったり、アクセシビリティツリーに不要なノードが増えたりと悩みの種でした。
Chrome 149（Edge 149）から CSS ギャップ装飾（Gap Decorations） が安定版として利用できるようになりました。これにより、GridやFlexbox、マルチカラムのギャップに対して、CSSだけで区切り線などの装飾を設定できます。
これまでの課題
ギャップに見た目の区切りを入れるには、以下のような問題がありました。
-
borderを使うと特定の方向に余計な線が出てしまう - 疑似要素や空のDOM要素を追加する必要がある
- アクセシビリティツリーに不要なノードが混入する
- レスポンシブレイアウトで前提が崩れやすい
- パフォーマンスへの影響が出ることもある
Gap Decorationsはこれらをまるごと解決する純粋な視覚装飾の仕組みです。既存のレイアウトには一切影響しません。
基本的なプロパティ
column-rule / row-rule
列ギャップには column-rule、行ギャップには row-rule を使います。borderと同じく幅・スタイル・色を指定できます。
.flex-container {
display: flex;
gap: 16px;
column-rule-width: 2px;
column-rule-style: solid;
column-rule-color: #ccc;
}
短縮形としてまとめて書くこともできます。
.flex-container {
column-rule: 2px solid #ccc;
}
See the Pen Untitled by degudegu2510 | Qiita (@degudegu2510) on CodePen.
rule（両方まとめて指定）
列・行の両方に同じスタイルを適用したい場合は rule を使います。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
rule: 1px solid #e0e0e0;
}
See the Pen Untitled by degudegu2510 | Qiita (@degudegu2510) on CodePen.
複数の値を指定する
borderと異なり、ギャップごとに異なる値を指定できます。repeat() 構文にも対応しています。
.settings-panel {
row-rule: 1px solid #ccc;
row-rule-width: repeat(2, 1px), 4px;
}
この例では最初の2行のギャップに1px、3つ目のギャップに4pxが適用されます。
装飾の見た目を細かく制御する
column-rule-break / row-rule-break
交差点（列と行が交わる箇所）での線の描画方法を制御します。
.grid-container {
column-rule-break: intersection; /* 交差点で線が分割される */
}
| 値 | 動作 |
|---|---|
normal |
コンテナの種別に依存したデフォルト動作 |
none |
交差点で線が連続する |
intersection |
交差点で線が分割される |
column-rule-inset / row-rule-inset
線をギャップの端からどれだけ内側に縮めるかを指定します。
.grid-container {
column-rule: 1px solid #ccc;
column-rule-inset: 8px; /* 両端を8pxずつ内側に縮める */
}
overlap-join を使うと、線を角でつなぎ合わせることもできます。
column-rule-visibility-items / row-rule-visibility-items
どの位置のギャップに線を表示するかを制御します。
| 値 | 動作 |
|---|---|
normal |
デフォルト |
all |
空のギャップを含む全ギャップに表示 |
around |
隣接するアイテムが1つ以上あるギャップに表示 |
between |
両側にアイテムがあるギャップのみに表示 |
アニメーションもできる
線の幅・色・インセットはアニメーション対応しています。ホバー時に切り替えるといった表現が可能です。
.dashboard {
column-rule: 1px solid #fbbf24;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6;
rule-inset-junction: 0px;
}
ブラウザサポート
- Chrome 149 以降：フラグなしで利用可能
- Edge 149 以降：フラグなしで利用可能
- 非対応ブラウザでは装飾なしで正常にレンダリングされるため、段階的な適用が可能
- ポリフィルも開発中
まとめ
CSS ギャップ装飾（Gap Decorations）のポイントをまとめます。
- GridやFlexboxのギャップに
column-rule/row-rule/ruleで区切り線を追加できる - DOM要素を増やさず、アクセシビリティに影響しない純粋な視覚装飾
- 交差点・インセット・表示位置など細かい制御も可能
- 線の幅・色・インセットはアニメーション対応
- Chrome / Edge 149以降で利用可能、非対応環境はフォールバックが自然
これまで疑似要素や余分なマークアップで苦労していたパターンが、シンプルなCSSで実現できるようになりました。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。