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

ใน Grid นอกจากการจัดวางแล้วยังอาจจำเป็นต้องจัดตำแหน่งเนื้อหาตามแนวแกนนอนของ grid อีกด้วย ในกรณีนี้เราใช้คุณสมบัติ justify-content ซึ่งกำหนดไว้ในองค์ประกอบแม่ มาดูตัวอย่างการทำงานของคุณสมบัตินี้กัน

ที่จุดเริ่มต้นของแกน

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

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

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

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

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

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

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