cssで格子模様を描く方法

はじめに

今回は、cssで格子模様を描く方法の紹介です！

それでは！

今回作りたいのは、下記画像の縦4列×横3行マス目10個の格子模様です。これをcssで作る場合、みなさんはどうやって作りますか？？？

htmlは、下記です。

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

良くない例

まず、良くない例から紹介します。

それは、マス目ごとにborderを設定してしまうこと。。。一見問題なさそうに見えますが、これだと、マス目の枠線同士が重なって太く見えてしまうんですよね。（マス目同士に間隔があればこの書き方でOKです。）

.wrapper {
    display: grid;
    width: fit-content;
    grid-template-columns: repeat(3, 1fr);
  }

  .box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
  }

実際にborderが太くなっている。

良い例

それでは、良い記述の一例です。

枠線同士が重ならないためにはどうすればいいか？それは、、、各マス目のborderは右と下のみ記述、そして、マス目を覆うラッパーの上と左にborderを記述するという方法です。

.wrapper {
    display: grid;
    width: fit-content;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    grid-template-columns: repeat(3, 1fr);
  }

  .box {
    width: 100px;
    height: 100px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
  }

イメージで言うと、下記画像のようにborderを設定します。こうすることで、border同士が重なることを回避できます！！

最後に

今回は、格子模様のborderが重ならないためのcssの記述方法でした。cssもこだわると奥が深いですね！

ありがとうございました！