等間隔 grid に 一括して 枠線を引く サンプル

Qiita の 質問 で書いたので 眠らせておくのが勿体ないと思ったのでとりあえず投げておきます。

掲題

方法論的には枠を上下左右にそれぞれ 半border スペース 半border のリピート のニュアンス

css カスタムプロパティをしているので値を変える……ので サンプルも値を変更できるようにしています。

サンプル

.grid-container {
  /* #region 変数 */
  /** セルサイズ */
  --cell-size: 50px;
  /** セル数 */
  --cell-count: 5;
  /** border の幅 */
  --border-width: 2px;
  /** border の色 */
  --border-color: black;
  /** --border-width の半分幅 (計算値) */
  --border-width-half: calc(var(--border-width) / 2);
  /* #endregion */
  display: grid;
  grid-template-columns: repeat(var(--cell-count), 1fr);
  grid-template-rows: repeat(var(--cell-count), 1fr);
  width: calc(var(--cell-count) * var(--cell-size));
  height: calc(var(--cell-count) * var(--cell-size));
  position: relative;
  border: var(--border-width-half) var(--border-color) solid;
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        var(--border-color),
        var(--border-color) var(--border-width-half),
        transparent var(--border-width-half),
        transparent calc((100% / var(--cell-count)) - var(--border-width-half)),
        var(--border-color)
          calc((100% / var(--cell-count)) - var(--border-width-half)),
        var(--border-color) calc(100% / var(--cell-count))
      ),
      repeating-linear-gradient(
        to right,
        var(--border-color),
        var(--border-color) var(--border-width-half),
        transparent var(--border-width-half),
        transparent calc((100% / var(--cell-count)) - var(--border-width-half)),
        var(--border-color)
          calc((100% / var(--cell-count)) - var(--border-width-half)),
        var(--border-color) calc(100% / var(--cell-count))
      );
    pointer-events: none;
  }
}

以上。