STEP 1
border で区切ると端にも線が出る
Grid の要素どうしを線で区切るために、各要素の右と下に border を付けました。外側の端にも線が出てしまいます。右下の角をドラッグして幅を変えると列の数が変わり、どの要素が端に来るかも変わるので、:nth-child() で消すのも難しくなります。
訪問者
12,480
新規登録
326
購入
89
売上
¥1.2M
解約
4
問い合わせ
17
STEP 2
隙間に線を引く
column-rule と row-rule を Grid に指定すると、要素の間の隙間だけに線が引かれます。幅を変えて列の数が変わっても、線は隙間についていきます。rule-visibility-items: around は、両側とも空きセルの所には線を引かないようにします。
訪問者
12,480
新規登録
326
購入
89
売上
¥1.2M
解約
4
問い合わせ
17
STEP 3
交わる所で線を切る
rule-break: intersection で縦と横の線が交わる所で線を区切り、rule-inset-junction で交点の前後を空けます。
訪問者
12,480
新規登録
326
購入
89
売上
¥1.2M
解約
4
問い合わせ
17
使っている機能
column-rule / row-rule- 列の間と行の間の隙間に線を引く。これまで段組み（multi-column）だけで使えた column-rule が、Grid と Flexbox でも使えるようになった
rule-visibility-items- 空きセルの横に線を引くかを決める。around は片側だけでも要素があれば引き、between は両側に要素がある所だけに引く
rule-break- 線をどこで区切るかを決める。intersection は縦と横の線が交わる所ごとに区切る
rule-inset-junction- 線の端を、交点からどれだけ離すかを決める。負の値にすると、交点の中へ伸びる
CSS
/* 隙間の中央に縦と横の線を引く */
.gap-rule {
column-rule: 2px solid #c5cae9;
row-rule: 2px solid #c5cae9;
/* 両側とも空きセルの所には線を引かない */
rule-visibility-items: around;
/* 線の端を交点の中心まで伸ばし、途切れた線を交わる線につなげる */
rule-inset-junction: -50%;
}
/* 交わる所で線を切り、交点の前後を 8px 空ける */
.gap-junction {
rule-break: intersection;
rule-inset-junction: 8px;
}HTML
<div class="gap-grid gap-rule">
<div class="gap-tile"><p class="gap-tile-label">訪問者</p><p class="gap-tile-value">12,480</p></div>
<div class="gap-tile"><p class="gap-tile-label">新規登録</p><p class="gap-tile-value">326</p></div>
<div class="gap-tile"><p class="gap-tile-label">購入</p><p class="gap-tile-value">89</p></div>
<div class="gap-tile"><p class="gap-tile-label">売上</p><p class="gap-tile-value">¥1.2M</p></div>
<div class="gap-tile"><p class="gap-tile-label">解約</p><p class="gap-tile-value">4</p></div>
<div class="gap-tile"><p class="gap-tile-label">問い合わせ</p><p class="gap-tile-value">17</p></div>
</div>