格子UIで空のアイテムに線を引かない実装案

要件

• アイテム同士の間に線を引く
• アイテムの横幅は均一とする
• リストの外側に線を引かない
• 線の幅やカラム数を変更して汎用的に使える
• 空（から）のアイテムに線を引かない

設計

1. itemの右と下にborderを指定する
2. listをitemのborder幅ぶん右下にずらして、右端と下端のitemのborderをはみださせる
3. listをネガティブマージンで左端まで広げる
4. wrapperの外側をoverflowで隠す

実装

HTML

<div class="wrapper">
  <div class="list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

実際は、ulやliでマークアップしたり、BEM（MindBEMding）でclass名を指定したりするかもですが、ここでは説明のためdivのみで構成しています。

CSS

.wrapper {
  width: 100%;
  overflow: hidden;
  /* 変数でカスタマイズ可能 */
  --border-width: 1px;
  --border-color: gray;
  --column-count: 3;
}

.list {
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  transform: translate(var(--border-width), var(--border-width));
  margin-left: calc(-1 * var(--border-width));
  margin-top: calc(-1 * var(--border-width));
}

.item {
  border-right-width: var(--border-width);
  border-bottom-width: var(--border-width);
  border-style: solid; /* これも変数にして良いかも */
  border-color: var(--border-color);
}

box-sizing: border-box;の前提です。

余談

上記はあくまでひとつの案です。

UIの実装は「結果オーライ」な面があり、あとから「負債」になることも少なくありません。

しかし、それらは「当時の実装者が試行錯誤した成果」とも言えます。

そう捉えたうえで、「こうしたらもっと良くなるかも」を考えていけると、楽しく開発ができるように思います