CSSグリッドを使用したコラム数の計算方法


与えられたCSSコードは以下のようになっています。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

上記のコードでは、.gridクラスに対してCSSグリッドを定義しています。grid-template-columnsプロパティは、各列の幅を指定しています。1frはフラクショナル単位であり、利用可能なスペースを等分割することを意味します。

この場合、grid-template-columnsに指定されている値は1fr 1fr 1fr 1frです。これは4つのコラムを定義しており、それぞれのコラムの幅は利用可能なスペースを等分割しています。

したがって、このCSSグリッドには4つのコラムがあります。

以下は異なるコラム数の例です。

2つのコラムの場合:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

3つのコラムの場合:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

5つのコラムの場合:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

これらの例を参考にして、必要なコラム数に対応する値をgrid-template-columnsに設定することができます。