การจัดวางเนื้อหาแนวแกนทั้งสองใน CSS Grid

บ่อยครั้งในกริด อาจมีความจำเป็นต้อง จัดวางเนื้อหาแนวแกนแนวนอน และแนวตั้งของกริดไปพร้อมกัน เพื่อจุดประสงค์นี้ เราสามารถใช้ คุณสมบัติสองอย่างที่คุณได้เรียนรู้ในบทเรียนที่แล้วร่วมกันได้: 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;
}

โจทย์ฝึกปฏิบัติ

สร้างกริดที่ประกอบด้วยหก องค์ประกอบและจัดวางในสอง คอลัมน์ จัดวางองค์ประกอบ ตามจุดเริ่มต้นของแนวนอนและกึ่งกลางของแนวแกนตั้งของกริด

ตอนนี้ให้จัดวางองค์ประกอบกริด ในสามคอลัมน์และกำหนดการจัดวางองค์ประกอบ ที่กึ่งกลางของแนวนอนและจุดสิ้นสุดของแนวแกนตั้งของกริด

เปลี่ยนโจทย์ข้อที่แล้ว เพื่อให้การจัดวางองค์ประกอบ เกิดขึ้นที่จุดสิ้นสุดของแนวนอน และกึ่งกลางของแนวแกนตั้งของกริด