grid-template-columnsプロパティ

プロパティ grid-template-columns は、グリッド（格子）内の要素が占める列の数と幅を設定します。このプロパティは親要素に指定され、子要素の列幅を定義します。プロパティの値には、サイズ単位で列幅を指定します。

プロパティにピクセル値を指定すると、列のサイズは正確にその値に従います。 auto というキーワードを指定すると、列は利用可能なすべてのスペースを埋めます。単位 fr（fraction、分数）を使用すると、すべてのスペースが等しい部分に分割されます。 fr の利点は、異なるコンテナや画面解像度への適応性です。なぜなら fr は、ピクセル単位の正確なサイズに縛られることなく、指定された数の分数にスペースを単純に分割するからです。

構文

セレクタ {
	grid-template-columns: 列の幅;
}

例

グリッド内の要素に対して列幅を設定してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

1番目と3番目の列にはピクセルで固定幅を指定し、 2番目の列には利用可能なスペースを自動的に埋めるように指定してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

次に、grid-template-columns プロパティを使用して、 1番目と2番目の列がコンテナの1つの部分を占め、 3番目の列が3つの部分を占めるようにしてみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

fr 単位で指定された値は分数の形を取ることができます。前の例を変更して、2番目と3番目の列の幅を小数で指定してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 0.5fr 2.5fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

grid-template-columns プロパティに repeat() 関数を指定してみましょう。この関数はコンテナに、3つの列すべてが同じ幅を持つべきであることを伝えます：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

前の例を変更して、3つの同じ列に加えて、コンテナの2フラクションを占める4番目の列を追加してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

最初の2列にコンテナの1フラクションの幅を設定し、最後の2列に2フラクションの幅を設定してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

次に、repeat() 関数と独立した fr 単位で指定された値を組み合わせて列幅を設定してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

repeat() 関数内では auto-fill という値を指定できます。これにより、必要な幅の同じ列がコンテナを埋めます：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

auto-fill と一緒に minmax 関数を指定すると非常に便利です。この関数は列幅の範囲を最小値から最大値まで設定します。コンテナの幅がすべての列を収容できない場合、その一部は新しい行に移動します。その際、行内の列は均等に配置されます。前の例を変更して minmax 関数を指定してみましょう。列の配置のさまざまなバリエーションを見るには、ブラウザのページ幅を変更してください：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

次に、auto-fit プロパティを指定してみましょう。 auto-fill との違いは、利用可能なコンテナ幅に合わせて列数を調整し、列を拡大または縮小する点にあります：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

fr と並行して、% の値も使用できます。これも列がコンテナのどの部分を占めるかを定義します。この場合、まず % での列サイズが計算され、残りの空きスペースがフラクションに分割されます：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50% 1fr 2fr 30%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

grid-template-columns プロパティと grid-template-rows プロパティを一緒に使用してみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

grid-template-columns プロパティと grid-template-rows プロパティを使用して、 3行に配置された9つのセルからなる表を作成してみましょう。ただし、2行目と3行目は同じ幅を持ち、各列は異なる幅を持つようにします：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 60px 1fr 60px;
	grid-template-columns: 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

次に、前の例の表で、一番上の行の幅を2フラクション、 1番目の列の幅を0.5フラクションにしてみましょう：

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 2fr 1fr 1fr;
	grid-template-columns: 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

grid-template-columnsプロパティ

構文

例

例

例

例

例

例

例

例

例

例

例

例

例

例

例

関連項目