การจัดแนวภายในเซลล์ของ CSS Grid ตามแกนตั้ง

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

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

มาจัดแนวองค์ประกอบของเราภายในเซลล์ตามจุดเริ่มต้นของแกนตั้งกัน:

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

#parent {
	display: grid;
	align-items: 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;
}

ลองดู Grid ของเราในตัวดีบั๊กของเบราว์เซอร์:

ตามศูนย์กลางของแกน

และตอนนี้มาจัดแนวองค์ประกอบของเราในเซลล์ตามศูนย์กลางของแกนตั้ง:

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

#parent {
	display: grid;
	align-items: 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;
}

ลองดู Grid ของเราในตัวดีบั๊กของเบราว์เซอร์:

ตามจุดสิ้นสุดของแกน

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

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

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

ลองดู Grid ของเราในตัวดีบั๊กของเบราว์เซอร์:

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

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

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

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