CSSグリッドセル内水平軸配置

グリッドセル内の要素、つまり列と行の交差によって生じる領域の配置には、親要素で設定されるjustify-itemsプロパティが使用されます。配置はブラウザの開発者ツールでグリッドを表示すると最も明確に確認できます。

軸の開始位置揃え

セル内の要素を水平軸の開始位置に揃えてみましょう：

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

次に、開発者ツールでこのグリッドを見てみましょう：

軸の中央揃え

セル内の要素を水平軸の中央に揃えてみましょう：

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

#parent {
	display: grid;
	justify-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

次に、開発者ツールでこのグリッドを見てみましょう：

軸の終端揃え

要素を水平軸の終端に揃えてみましょう：

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

#parent {
	display: grid;
	justify-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

次に、開発者ツールでこのグリッドを見てみましょう：

実践タスク

5つの要素を3行に配置したグリッドを作成してください。要素の水平軸配置を実行してください。

次に、グリッド要素を2行に配置し、セル内の要素が水平軸の中央に揃うように配置を設定してください。

前のタスクを変更し、要素の配置が水平軸の終端で行われるようにしてください。