【CSS】column-ruleとrow-ruleについて

投稿日 2026年9月29日
著者くまだ
カテゴリー Web制作

どうも、くまだです。

CSS のマルチカラムレイアウトで、要素と要素の間に区切り線を引くcolumn-ruleとrow-ruleについてのメモ。

column-ruleとrow-ruleとは

column-ruleは、CSS のマルチカラムレイアウトで列と列の間に引く区切り線を制御するプロパティ、row-ruleは行と行の間に区切り線を引くプロパティです。

コードは以下になります。

    <div class="container">
        <div class="box">
            <p>テキストテキスト</p>
        </div>
        <div class="box">
            <p>テキストテキスト</p>
        </div>
        <div class="box">
            <p>テキストテキスト</p>
        </div>
        <div class="box">
            <p>テキストテキスト</p>
        </div>
    </div>

.container {
  padding: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  column-rule: 2px solid black;
  row-rule: 2px solid black;
}

borderプロパティと同じで、column-ruleプロパティとrow-ruleプロパティはショートハンドの書き方で、細かくわけると以下のようにも記述できます。

column-rule-width: 2px; /*縦線の太さ*/
column-rule-style: solid; /*縦線の種類*/
column-rule-color: black; /*縦線の色*/

row-rule-width: 2px;　/*横線の太さ*/
row-rule-style: solid;　/*横線の太さ*/
row-rule-color: black;　/*横線の太さ*/

線と線の交差点はrule-breakプロパティで線と途切れさせることもできます。

.container {
  padding: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  column-rule: 2px solid black;
  row-rule: 2px solid black;

  rule-break: intersection;
}