グリッドコンテナの列のサイズと数を定義するプロパティです。px、%、fr（fractional unit）、auto、repeat()関数などで柔軟に指定できます。複雑な2次元レイアウトの基礎となります。
grid-template-columns: <track-size> ... | <line-name> <track-size> ...| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) |
| grid-cols-none | grid-template-columns: none |
一般形: grid-cols-{n}
任意値: grid-cols-[200px_1fr]
grid-template-columns: 1fr 1fr 1fr;3つの等幅（同じ幅）の列を作成します。例えば3カラムのレイアウトや、カードを均等に並べたい時に使います。
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));列の数を自動調整し、各列の最小幅を300px、最大幅を等分（1fr）にします。画面幅に応じてカラム数が増減するレスポンシブなグリッドが簡単に作れます。
repeat()とminmax()を組み合わせるとレスポンシブなグリッドが簡単に作れる。
repeat(auto-fit, minmax(240px, 1fr))のレスポンシブグリッドは定番ですが、AIはauto-fitとauto-fillの違い（アイテムが少ないとき広がるか空トラックを残すか）を逆に説明することがあります。また%とfrの違い（frはgapを引いた残りを分配）も混同されがちです。
メディアクエリなしで列数が自動調整されるカードグリッドをrepeat(auto-fit, minmax())で実装して
auto-fitとauto-fillの違いを、このレイアウトでどちらを使うべきかの判断込みで説明して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。