CSSのgrid-template-columnsプロパティの使用方法

1. 固定サイズの列:

   .grid-container {
   display: grid;
   grid-template-columns: 200px 300px 150px;
   }

   上記の例では、grid-container内の列はそれぞれ200ピクセル、300ピクセル、150ピクセルの幅に設定されます。

2. フラクショナルユニット:

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

   上記の例では、grid-container内の列は利用可能なスペースの割合に応じて幅が調整されます。1frは利用可能なスペースの1/4、2frは利用可能なスペースの1/2を表します。

3. 自動フィル:

   .grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }

   上記の例では、グリッドコンテナ内の列は200ピクセル以上の最小幅を持ち、利用可能なスペースに応じて自動的にフィルされます。列の最大幅は利用可能なスペースの1/4です。

これらはいくつかの基本的な例ですが、grid-template-columnsプロパティにはさまざまなオプションがあります。詳細な使用方法については、CSSのドキュメントやチュートリアルを参照してください。