CSSグリッドにおける両軸方向のコンテンツ配置

グリッド内でコンテンツを水平軸と垂直軸の両方に沿って同時に配置する必要が生じることはよくあります。この目的のために、前のレッスンで学んだ2つのプロパティを組み合わせて使用できます: justify-content と align-content。

垂直軸の始点と水平軸の終点

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: flex-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;
	justify-content: flex-start;
	align-content: flex-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;
}

垂直軸の中心と水平軸の終点

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: 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;
}

実践問題

6つの要素からなるグリッドを作成し、それらを2列に配置してください。要素をグリッドの水平軸の始点と垂直軸の中心に配置してください。

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

前の問題を変更して、要素がグリッドの水平軸の終点と垂直軸の中心に配置されるようにしてください。