備忘録的プログラミングリファレンス

grid-template-columns プロパティ

　grid-template-columns プロパティは、グリッドコンテナの子エレメント（グリッドアイテム）の数と幅を指定する CSS のプロパティです。 主軸方向に並べるグリッドアイテムの数とその幅の指定です。
　グリッドコンテナとは display:grid; を設定したエレメントのことです。この grid-template-columns プロパティは display:grid; を設定したエレメントで機能します。

　グリッドアイテムの幅をスペースで区切って指定します。指定した数分だけ列方向にグリッドアイテムを並べて、その幅が設定されます。

グリッドアイテムの幅を20%、60%、20%で指定（Exampleを参照）
.grid_container{
	display: grid;
	grid-template-columns: 20% 60% 20%;
}

　交差軸方向の並び数と幅を指定するには、grid-template-rows プロパティを使用します。
　grid-template プロパティでgrid-template-columns、grid-template-rows を一括して指定することができます。

ページ内 Index

構文(Syntax)

CSS

grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;

DOM ( JavaScript )

値の取得
String = object.style.gridTemplateColumns;
値の設定
object.style.gridTemplateColumns="none | auto | max-content | min-content | length | initial | inherit";

　「 object.style 」でスタイル定義全てをテキストで取得することもできます。

値（Values）

　以下の値を列方向に並べたいグリッドアイテム数分だけ定義します。

Value摘要
none初期値（default値）
autoグリッドアイテムの幅を自動で
max-contentグリッドアイテムの幅をアイテム内のコンテンツの最大幅に合わせる
min-contentグリッドアイテムの幅をアイテム内のコンテンツの最小幅に合わせる
lengthCSS長さの単位。fit-content() による指定も可
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考（Remarks）

初期値（Default value）none
継承（Inherited）No
CSS AnimationYes

Example

　grid-template-columns プロパティの例です。 親エレメント<div id="over">に、grid-template-columns プロパティでグリッドアイテムを左から幅100px、200px、autoで指定しています。 コンテンツ4、5は指定していません。
　指定されていないアイテムは自動で並べられます。ここでは、列が３つと判断されて、２段目以降は１段めに合わせて主軸方向に並べられて高さは auto と同じです。

縦横に整列させる例

　grid-template-columns と grid-template-rows プロパティを使って縦と横に整列させる方法です。

　この例では、６つのグリッドアイテムを主軸方向に３つ、縦に２つ並べます。
　そのために、grid-template-columns で３列、grid-template-rows で２行分を指定します。
　幅は均等に分けられるように全て auto で、高さはキレイにみえるように固定値を指定しています。

関連する CSS プロパティ

　以下は、grid-template-columns プロパティに関連するプロパティです。

display:grid;並びを設定することができるdisplayプロパティ
grid-areaグリッドアイテムに名称を指定
grid-auto-columnsグリッドアイテムの幅
grid-auto-flowグリッドコンテナの領域を自動的に拡張
grid-auto-rows全てのグリッドアイテムの高さ
grid-columnグリッドアイテムの列単位の位置と連結数
grid-column-end列単位の位置や連結数
grid-column-gap列同士のギャップ幅
grid-column-start列単位（横）の位置や連結数
grid-gapグリッドアイテムどうしのギャップのサイズ
grid-row行単位の位置と連結数
grid-row-end行単位の位置や連結数
grid-row-gap行同士のギャップ幅
grid-row-start行単位の位置や連結
grid-templateグリッドアイテムの並び数やサイズ
grid-template-areasグリッドアイテムの配置や連結
grid-template-columnsグリッドアイテムの列の並び数、幅
grid-template-rowsグリッドアイテムの行の並び数と高さ

関連（Related）