คุณสมบัติ place-items

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

ไวยากรณ์

selector {
	place-items: horizontal-alignment-value vertical-alignment-value;
}

ตัวอย่าง . การจัดตำแหน่งที่กึ่งกลางของแกนตั้งและที่เริ่มต้นของแกนนอน

<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;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	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;
	place-items: end center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	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;
	place-items: start end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

ดูเพิ่มเติม

คุณสมบัติ justify-items,
ซึ่งกำหนดการจัดตำแหน่งองค์ประกอบภายในเซลล์กริดตามแนวแกนนอน
คุณสมบัติ align-items,
ซึ่งกำหนดการจัดตำแหน่งตามแนวแกนตั้ง