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

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

ไวยากรณ์

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

ตัวอย่าง

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

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

css#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 กัน:

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

css#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 ทำให้องค์ประกอบที่หนึ่ง สอง และสาม จัดวางอยู่ในแถวแรก และให้องค์ประกอบที่สี่ ครอบคลุมทั้งแถวที่สอง:

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ดูเพิ่มเติม