CSSでの格子模様の描く方法

この記事では、CSS Gridを用いて簡単に格子模様を描く方法を紹介します。

説明は最後です。

基本的な格子模様

この基本的な設定を使用して、HTML内の.wrapperクラスの中に任意の数の.boxを配置することで、格子模様を拡張することができます。

各.boxは100×100ピクセルのサイズで、黒い1ピクセルの線で区切られています。

.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;
}

サンプルとしてこんな感じです。

カラーバリエーション

CSS Gridを用いて作成された格子模様の色は、borderプロパティを変更することで簡単にカスタマイズできます。

以下は、赤い線の格子模様の例です。

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

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

サイズと間隔の調整

格子のサイズや間隔を調整するには、.boxのwidthやheight、またgrid-template-columnsの設定を変更します。

以下は、50×50ピクセルの格子模様の例です。

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

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

このように、CSS Gridのプロパティを変更することで、格子模様のサイズや間隔、色を簡単にカスタマイズすることができます。

説明

.wrapper

• display: grid;
  • .wrapper要素をグリッドコンテナとして設定します。これにより、この要素内の子要素はグリッドアイテムとして扱われます。
• width: fit-content;
  • .wrapperの幅は、その中身（子要素や内容）に合わせて自動的に調整されます。この設定により、格子模様の幅が動的に決まります。
• border-top: 1px solid #000; と border-left: 1px solid #000;
  • .wrapper要素の上辺と左辺に1ピクセルの黒い境界線を追加します。
• grid-template-columns: repeat(3, 1fr);
  • .wrapper内のグリッドアイテムを3列に配置します。repeat(3, 1fr)は、3つの等しい幅の列を作成することを意味します。1frは、利用可能なスペースを3つの列に均等に分割するための単位です。

.box

• width: 100px; と height: 100px;
  • 各.boxの幅と高さを100ピクセルに固定します。
• border-right: 1px solid #000; と border-bottom: 1px solid #000;
  • 各.boxの右辺と下辺に1ピクセルの黒い境界線を追加します。これにより、格子模様が形成される原理です。