前回までのおさらい

前回は段組みのcolumn-ruleを題材に、CSS Gap Decorationsの土台となる考え方を解説しました。

• column-ruleはwidth / style / colorをまとめたショートハンド
• 個別のプロパティで書くときはcolumn-rule-styleの指定を忘れない（初期値はnone）
• 線は隙間の中央に描かれ、レイアウト上の幅を取らない
• CSS Gap Decorationsで、CSS GridやFlexboxの隙間にも線を引けるようになり、row-ruleとruleが加わった

今回は、実際にCSS GridやFlexboxのレイアウトで、上記のプロパティを使って線を引いていきます。

折り返すリストの区切り線

タグの一覧のように、項目を横に並べて区切り線を入れたい場面はよくあります。従来、これはborderや擬似要素などで作ってきました。

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

.tags li:not(:first-child) {
  border-left: 1px solid #c00;
  padding-left: .75rem;
  margin-left: -.75rem;
}

線は要素の左端に付くので、padding-leftでテキストとの間隔を空け、負のmarginで位置を戻しています。一見よさそうですが、項目が折り返すと問題が起きるので、このあと掲載するデモで確認してみましょう。

一方、column-rule版はこれだけです。アイテム側のセレクターは丸ごと不要になりました。

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  column-rule: 1px solid #c00;
}

では、border版とcolumn-rule版との違いを、デモで見比べてみましょう。

枠の右下をドラッグして幅を変えてみてください。border版では、折り返した2行目の先頭にも線が残ってしまいます。:first-child以外に線を引く指定なので、その項目が行の先頭に来るかは判断できないのです。

では:nth-child()で除外すればよいのでは、と思うかもしれません。しかし何個目で折り返すかは画面幅とテキスト量で決まるので、CSSに静的に書くことはできません。これがborderの限界です。

column-rule版では、幅を変えても、行の先頭と末尾に線は出ません。column-ruleが描くのは「隣り合うアイテムのあいだの隙間」なので、行の外側には描く場所がないわけです。

また、折り返すと行のあいだにも隙間ができますが、そこに線は引かれていません。横方向の線を担当するrow-rule-styleの初期値もnoneなので、row-ruleを指定しないかぎり横線は描かれないのです。

区切り線のための<div>や擬似要素が不要になるのもうれしい点です。

row-ruleとruleショートハンド

ここまでは縦方向の線だけを扱いましたが、横方向の隙間に線を引きたい場面もあります。そのためのプロパティがrow-ruleで、行のあいだの隙間に線を引きます。

.grid {
  display: grid;
  gap: 2rem;
  rule: 2px solid #c00;
}

ruleはcolumn-ruleとrow-ruleをまとめて指定するショートハンドです。縦横どちらにも同じ線が引かれ、格子状の罫線になります。デモで見てみましょう。

3列3行のCSS Gridで、線の指定を切り替えられるデモです。指定するプロパティによって、線の引かれ方が次のように変わります。

• column-rule：縦方向の隙間だけに線が引かれる
• row-rule：横方向の隙間だけに線が引かれる
• rule：縦横両方に線が引かれる

機能検出の落とし穴

CSS GridやFlexboxでの区切り線に対応しているのは、現時点（2026年8月）ではChromiumベースのブラウザだけです。@supportsでフォールバックを用意したくなりますが、ここに落とし穴があります。

たとえば@supports (column-rule: 1px solid)と書いても、この条件はすべてのブラウザで満たされてしまいます。@supportsが調べているのは「そのプロパティと値を解釈できるか」だけで、「どのレイアウトで実際に線が引かれるか」までは見てくれないからです。column-ruleは段組み向けに昔から存在するので、どのブラウザでも解釈できるわけです。

判定には、CSS Gap Decorationsで新しく加わったrow-ruleを使いましょう。

/* すべてのブラウザに適用されるフォールバック */
.tags li:not(:first-child) {
  border-left: 1px solid #c00;
}

@supports (row-rule: 1px solid) {
  .tags li:not(:first-child) {
    border-left: none;
  }

  .tags {
    column-rule: 1px solid #c00;
  }
}

まずborderで区切り線を引き、対応ブラウザではそれを打ち消してcolumn-ruleに切り替えています。

ただし、このフォールバックで非対応ブラウザに用意されるのは、先ほど見たborder版そのものです。つまり項目が折り返すと、2行目の先頭にも区切り線が出てしまいます。column-ruleがこれを解決するのは対応ブラウザだけなので、折り返しが起きるレイアウトでは、非対応ブラウザでその見え方を許容できるかどうかを見極める必要があります。

そもそも線が装飾でしかないなら、フォールバックを用意しないという判断もできます。非対応ブラウザでは線が描かれないだけで、レイアウトが崩れることはありません。区切り線がなくても情報が読み取れるなら、対応ブラウザで少し見やすくなる上乗せとして割り切るほうが、コードはずっと単純になります。

交点で線を切るかどうか：rule-break

縦横に線を引くと、線と線が交わる点が生まれます。この交点の扱いを決めるのがrule-breakです。デモを見てみましょう。

同じアイテムの並びを、CSS GridとFlexboxで作ってあります。どちらも3列で、2番目のアイテムだけが2列ぶんの幅をもつので、その下辺に横線と縦線が突き当たる「T字」の交点ができます。

.grid {
  rule: 2px solid #c00;
  rule-break: normal;
}

rule-breakに指定できる値は次の3つです。

• none：交点で切らず、隙間の端から端まで1本の連続した線を描く
• intersection：T字や十字の交点で線を開始・終了する。つまり交点で切る
• normal（初期値）：コンテナーの種類によって挙動が変わる

厄介なのが初期値のnormalです。同じ値でも、コンテナーの種類で結果が変わります。

デモのラジオボタンで値を切り替えると、この違いが確認できます。CSS Gridではnormalとnoneで結果が変わります。noneにすると2本目の縦線が1行目まで伸び、2列ぶんのアイテムを横切ります。一方Flexboxでは、normalとnoneで見た目がまったく変わりません。

intersectionはどちらのコンテナーでも、すべての交点で線が切れます。

なお、最初のタグリストでrule-breakが出てこなかったのは、column-ruleだけを指定していたからです。縦線しかなければ線と線が交わる場所もないので、rule-breakを考える必要はありません。このプロパティが意味をもつのは、縦横の両方に線を引いたときです。

ここまでのまとめ

今回は、CSS GridやFlexboxでのcolumn-ruleとrow-ruleを解説しました。要点は次のとおりです。

• 折り返すリストの区切り線は、column-ruleなら行の先頭と末尾に線が残らない
• 横方向の線はrow-rule、両軸まとめるならrule
• @supportsのcolumn-ruleはすべてのブラウザでtrueになるので、機能検出にはrow-ruleを使う
• rule-breakのnormalはコンテナーの種類で挙動が変わる

次回は、線の見え方を作り込む方法を見ていきます。空いているセルに線を出さない指定、線の端の調整、隙間ごとに違う線を引く方法を扱い、最後に使いどころの見極めを解説します。