grid-templateプロパティ

プロパティgrid-templateは、グリッド内の要素が占める行と列の数と幅を指定し、プロパティgrid-template-rows およびgrid-template-columnsの一括指定形式です。要素が配置される行と列はスラッシュで区切って指定します。プロパティgrid-templateは親要素に設定され、子要素の配置を決定します。プロパティ値では、行や列の幅を任意の寸法単位で指定します。

プロパティ値にピクセル値を指定した場合、要素のサイズは正確にその値に従います。キーワードautoを指定すると、列と行は利用可能なすべてのスペースを埋めます。単位fr（フラクション）を使用すると、すべてのスペースが均等な割合に分割されます。 frの利点は、異なるコンテナや画面解像度に適応できることです。これは、 frがピクセル単位の正確なサイズに依存せず、指定された数のフラクションに分割するだけだからです。

構文

セレクタ {
	grid-template: 行の幅と数 / 列の幅と数;
}

例

プロパティgrid-templateを使用して表を作成しましょう：

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

次に、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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

例

前の例の表で、一番上の行の幅を2フラクションに、最初の列の幅を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: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

grid-templateプロパティ

構文

例

例

例

関連項目