ウェブサイトのレイアウトをグリッドやフレックスボックスで組んだあと、要素と要素のあいだに区切り線を入れたくなる場面は多い。カード一覧の列のあいだに細い罫線を引く、料金表のセルを線で仕切る、といった演出だ。ところがこれまでのCSSには、こうした隙間そのものに線を引く手段が用意されていなかった。Chrome と Edge の149で使えるようになった gap decorations は、その長年の空白を埋める機能になる。

これまでは擬似要素や枠線で工夫していた

グリッドやフレックスボックスの gap プロパティは、要素のあいだに余白を作れるが、その余白に色や線を付けることはできない。そのため制作現場では、各セルに border を付けて重なりを調整したり、::before や ::after の擬似要素で線を描いたり、背景にグラデーションを敷いて線に見せかけたりといった回り道をしてきた。

どの方法も、セルの数が変わったり折り返しが起きたりすると崩れやすい。線を引きたいだけなのに、レイアウトの計算まで巻き込んでしまうのが悩みどころだった。gap decorations は、この作業を余白側の仕事として切り出してくれる。

column-rule と row-rule で隙間に線を引く

マルチカラムレイアウトには以前から column-rule というプロパティがあり、段組みの段のあいだに線を引けた。新機能は、この column-rule をグリッドとフレックスボックスでも使えるように広げ、さらに横方向の隙間を担当する row-rule を新たに加えたものだ。

書き方は border とよく似ている。線の太さ、線種、色をそれぞれ column-rule-width、column-rule-style、column-rule-color で指定し、まとめて column-rule として一行で書くこともできる。row-rule も同じ構成だ。

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  column-rule: 1px solid #ccc;
  row-rule: 1px solid #ccc;
}

大事なのは、これらの線が純粋に見た目だけの装飾で、余白の幅やレイアウトには一切影響しない点だ。線を足しても要素の位置がずれないので、あとから飾りを差し込む使い方に向いている。

フレックスボックスで要素が複数行に折り返すレイアウトでも、行と行のあいだに row-rule の線がきれいに収まる。列数や行数が中身に応じて変わる動的なレイアウトほど、擬似要素で線を管理する手間から解放される効果は大きい。

repeat()で線のパターンを作る

column-rule-width などには、グリッドのトラック指定でおなじみの repeat() が使える。これを使うと、隙間ごとに太さや色を変えたパターンを短い記述で作れる。たとえば数独の盤面のように、細い線を並べつつ何本かおきに太い線を挟む、といった表現だ。

column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);

線の位置を隙間の中央から少しずらす column-rule-inset のようなプロパティや、どの隙間に線を引くかを選ぶ仕組みも用意されている。縦の線と横の線が交わる交点の見せ方も細かく制御でき、交点で線を途切れさせるか、そのまま突き抜けさせるか、描画の重なり順をどうするかまで指定できる。単なる区切り線にとどまらず、表やカレンダー、価格表といった格子状のデザインを、擬似要素なしで組み立てられるようになる。

使えるブラウザと取り入れ方

gap decorations が正式に使えるのは、いまのところ Chrome と Edge の149からで、2026年6月に登場した。ほかのブラウザではまだ対応が追いついていないため、現時点では装飾の上乗せとして使うのが無難だ。

幸い、この機能は線を描くだけでレイアウトを動かさない。対応していないブラウザでは線が表示されないだけで、要素の並びや余白は保たれる。つまり、線があれば少し見やすく、なくても困らない、という段階的な取り入れ方ができる。地方の制作現場でも、まずは社内サイトや実験的なページで感触を確かめてから、対応ブラウザの広がりに合わせて本番へ持ち込むのが手堅い進め方になるだろう。