ບັນດາຄວາມກົດລະບຽບ grid-column-end

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

grid-column-end ຄວາມທີ່ບັນດາບັນດາຄົນຈະຂ້າມວົງກອງຫຼັງການທີ່ຈະມີການສະໜັບສະໜູນ, ຫຼືບັນດາບັນດາຄົນຈະຢຸດສະແດງໃນວົງກອງ (column-line)

ບັນດາຄວາມທີ່ຢູ່ດ້ານຫຼັງ

ອີງຕາມ:

CSS Tutorial:CSS Grid Layout

ຄວາມຄິດຕົວ

ຕົວຢ່າງ 1

ເຮັດໃຫ້ "item1" ຂ້າມວົງກອງສາມກັບຫຼັງການທີ່ຈະມີການສະໜັບສະໜູນ

.item1 {
  grid-column-end: span 3;
}

ການທົດລອງດາວໂຕ

ຕົວຢ່າງ 2

ທ່ານສາມາດໃຊ້ຄູ່ມືວົງກອງທີ່ຈະຂ້າມກັບວົງກອງແທນກັບຈຳນວນວົງກອງທີ່ຈະຂ້າມ

.item1 {
  grid-column-end: 3;
}

ການທົດລອງດາວໂຕ

ສັບພາສາ CSS

grid-column-end: auto|span n|column-line;

ຄູ່ມືບັນດາຄວາມ

ຄູ່ມື ກ່າວວ່າ
auto ຄູ່ມືສົມບູນ. ບັນດາບັນດາຄົນຈະຂ້າມກັບວົງກອງຫຼັງການທີ່ຈະມີການສະໜັບສະໜູນ
span n ກ່າວວ່າບັນດາບັນດາຄົນຈະຂ້າມກັບວົງກອງຫຼັງການທີ່ຈະມີການສະໜັບສະໜູນ
column-line ກ່າວວ່າບັນດາບັນດາບັນດາຄົນຈະຢຸດສະແດງບັນດາບັນດາຄົນໃນກາງວົງກອງຫຼັງການທີ່ຈະມີການສະໜັບສະໜູນ

ຂໍ້ມູນດ້ານເຕັກນິກ

ຄູ່ມືສົມບູນ: auto
ການຕໍາເວັງ: ບໍ່
ການສ້າງວີລະບາຍ: ສະໜັບສະໜູນ. ບັນດາຄວາມ:ບັນດາຄວາມທີ່ກ່ຽວກັບການຕັ້ງການວີລະບາຍ.
ສະຖານະ: CSS Grid Layout Module Level 1
ສັບພາສາ JavaScript: object.style.gridColumnEnd="5"

ການສະໜັບສະໜູນບັນດາບັນດາຄົນ

ຕົວອອກຂອງຕາມຂາວກ່າວວ່າຄົນບໍ່ມີການສະໜັບສະໜູນບັນດາບັນດາຄົນທີ່ມີການສະໜັບສະໜູນບັນດາບັນດາຄົນທີ່ມີການສະໜັບສະໜູນບັນດາບັນດາຄົນທີ່ມີການສະໜັບສະໜູນ

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44