CSSグリッドにおける列の数と幅

グリッドでの作業を始めるにあたり、まずは子要素が配置される列の数と幅を指定します。この目的のために、親要素で指定する grid-template-columns プロパティを使用します。このプロパティは、グリッド内で子要素が占める列の数と幅を定義します。プロパティの値には、列の幅をピクセル単位で指定します。

例

まずは親要素を作成し、それをグリッドコンテナにしましょう。 4つの子要素を持つ div があるとします。この親要素に、display プロパティで grid を設定し、 grid-template-columns プロパティで2つの列の幅を指定します：

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

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

例

次に、サイズの異なる4つの列を持つテーブルを作成してみましょう：

<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>

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

実践問題

9つの子要素を持つdivがあるとします。親要素をグリッドコンテナにしてください。

子要素を、幅 200px の2つの列に配置してください。

子要素を、幅 150px の3つの列に配置してください。

子要素を、3つの列に配置してください。最初の列の幅は 100px、 2番目の列は 150px、 3番目の列は 200px とします。