【CSS Modules】grid-template-columnsプロパティの使い方

grid-template-columnsプロパティは、CSS Gridレイアウトにおいて、グリッドコンテナ内の列（カラム）の構造を定義するためのプロパティです。このプロパティを使用することで、グリッドが持つ列の数や、それぞれの列の幅を柔軟に指定することができます。

具体的には、列の幅をピクセル（px）やパーセンテージ（%）といった固定的な値で指定するだけでなく、利用可能なスペースを分割するfr（fractional unit）単位、コンテンツのサイズに合わせて自動調整するautoキーワードなど、多様な方法で定義することが可能です。例えば、grid-template-columns: 100px 1fr 2fr;と記述すると、最初の列は100ピクセルの固定幅、残りのスペースを2番目の列と3番目の列で1:2の比率で分け合うグリッドが作成されます。

また、同じ列のパターンを繰り返したい場合にはrepeat()関数を用いることで、記述を簡潔にできます。さらに、minmax()関数を使用することで、列の最小幅と最大幅を設定し、コンテンツの量やビューポートのサイズに応じて自動的に調整される、より柔軟なレイアウトを実現できます。

このプロパティで定義された列の構造は、その上にグリッドアイテムを配置するための基礎となります。grid-template-rowsプロパティと組み合わせて使うことで、グリッド全体の行と列の構成を完全に制御し、複雑なレイアウトを効率的に構築できるようになります。現代のウェブデザインにおけるレスポンシブなレイアウト作成には欠かせない重要なプロパティです。

Copy
1grid-template-columns: 100px 1fr auto;

引数なし

引数はありません

戻り値なし

戻り値はありません