与えられた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
に設定することができます。