คุณสมบัติ grid-column-start

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

ไวยากรณ์

selector {
	grid-column-start: จำนวนบวกหรือลบ;
}

ตัวอย่าง

มาเริ่มกำหนดตำแหน่งเริ่มต้นให้องค์ประกอบในกริด กัน:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

ตัวอย่าง

และคราวนี้มาใส่ค่าลบในคุณสมบัติ grid-column-start กัน:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

ตัวอย่าง

และคราวนี้ด้วย คุณสมบัติ grid-column-end ทำให้องค์ประกอบที่หนึ่ง สอง และสาม จัดวางอยู่ในแถวแรก และให้องค์ประกอบที่สี่ ครอบคลุมทั้งแถวที่สอง:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

ตัวอย่าง

เมื่อคอลัมน์ที่องค์ประกอบใกล้เคียงครอบครอง ซ้อนทับกัน แต่ละองค์ประกอบถัดไป จะถูกเลื่อนลงไปหนึ่งแถว มาลองใช้ความเป็นไปนี้ทำ ให้องค์ประกอบแรกจัดวางในแถวแรก องค์ประกอบที่สอง - ในแถวที่สอง และองค์ประกอบที่สามและสี่ - ครอบครองแถวที่สาม:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

ดูเพิ่มเติม

คุณสมบัติ grid-column-end,
ซึ่งกำหนดตำแหน่งสิ้นสุดขององค์ประกอบในกริดตามคอลัมน์
คุณสมบัติ grid-column,
ซึ่งกำหนดตำแหน่งเริ่มต้นและสิ้นสุดขององค์ประกอบในกริดตามคอลัมน์
คุณสมบัติ grid-template-columns,
ซึ่งกำหนดจำนวนและความกว้างของคอลัมน์ในกริด
คุณสมบัติ grid-auto-columns,
ซึ่งกำหนดจำนวนและความกว้างของคอลัมน์ในกริดโดยนัย