CSSグリッド内でセル内の両軸に沿った配置のためのショートハンド

ショートハンドプロパティ place-items を使用すると、グリッドセル内の要素を両軸に沿って同時に配置できます。このプロパティは、スペースで区切られた2つの値を受け取ります。最初の値は垂直軸に沿った配置を設定し、2番目の値は水平軸に沿った配置を設定します。このプロパティは親要素に設定します。

このプロパティの動作を例で見てみましょう。

垂直方向中央、水平方向開始位置

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

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 100px 100px;
	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;
}

デバッガーでグリッドを見てみましょう:

実践タスク

6つの要素からなるグリッドを作成し、2列に配置してください。要素をグリッドの水平軸開始位置および垂直軸中央に配置してください。

次に、グリッド要素を3列に配置し、要素をグリッドの水平軸中央および垂直軸中央に配置するよう設定してください。

前のタスクを変更し、要素の配置がグリッドの水平軸終了位置および垂直軸開始位置に沿って行われるようにしてください。