การย่อคุณสมบัติสำหรับจัดตำแหน่งภายในเซลล์ตามทั้งสองแกนใน CSS Grid

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

มาดูการทำงานของ คุณสมบัตินี้จากตัวอย่างกัน

กึ่งกลางแนวตั้งและเริ่มต้นแนวนอน

<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;
}

ลองดู Grid ของเรา ในตัวตรวจแก้ข้อผิดพลาด:

สิ้นสุดแนวตั้งและกึ่งกลางแนวนอน

<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;
}

ลองดู Grid ของเรา ในตัวตรวจแก้ข้อผิดพลาด:

เริ่มต้นแนวตั้งและสิ้นสุดแนวนอน

<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;
}

ลองดู Grid ของเรา ในตัวตรวจแก้ข้อผิดพลาด:

งานฝึกปฏิบัติ

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

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

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