ຄວາມນວຍງານgrid-column
- ບ່ອນໜ້າໜ້າ grid-auto-rows
- ບ່ອນໜ້າຫນ້າ grid-column-end
ການອະທິບາຍແລະການນໍາໃຊ້
grid-column ກຳນົດຂະໜາດຂອງວັດຖຸທີ່ພົບໃນການຈັດການ Grid Layout ແລະຕັ້ງຂອບເຂດຂອງວັດຖຸ, ມັນເປັນປະກອບປະສົມຂອງບັນດາປະສົມປະກອບທີ່ຫຼາຍກວ່າ:
ອີງຕາມ:
CSS Tutorial:CSS Grid Layout
ຕົວຢ່າງ
ຕົວຢ່າງ 1
ເຮັດໃຫ້ "item1" ລົງໃນວົງສາຍ 1 ແລະຫຼຸດຫຼາຍວົງສາຍສອງອັນ:
.item1 {
grid-column: 1 / span 2;
}
ຕົວຢ່າງ 2
ທ່ານສາມາດໃຊ້ມູນຄ່າວົງສາຍແທນຈຳນວນວົງສາຍທີ່ຈະຫຼຸດຫຼາຍ.
.item1 {
grid-column: 1 / 3;
}
ສັບພາສາ CSS:
grid-column: grid-column-start / grid-column-end;
ມູນຄ່າປະສົມ
| ມູນຄ່າ | ການອະທິບາຍ |
|---|---|
| grid-column-start | ກໍານົດຈາກວົງສາຍທີ່ຈະເລີ່ມສະແດງວັດຖຸ. |
| grid-column-end | ກໍານົດຈາກລະບຽບກັບວົງສາຍອັກສອງຂັ້ນທີ່ຈະຢຸດສະແດງວັດຖຸຫຼືຫຼຸດຫຼາຍກັບຈຳນວນວົງສາຍຫຼາຍກວ່າ. |
ລະອຽດດ້ານເຕັກນິກ
| ມູນຄ່າສົງເສຍເລື່ອງ: | auto / auto |
|---|---|
| ນຳເອົາຈາກ: | ບໍ່ |
| ການສ້າງອິນລະນາວິທະຍາ: | ສະໜັບສະໜູນ. ບັນດາສິ່ງທີ່ສອບຖາມ:ປະສົມປະສານວັດຖຸຕິນປະກອບ. |
| ສະຖານະຂອງ: | CSS Grid Layout Module Level 1 |
| ສັບພາສາ JavaScript: | object.style.gridColumn="2 / span 2" |
ການສະໜັບສະໜູນບິວດີສະໜັບ
ຈຳນວນທີ່ຂຽນໃນຕາຕະລາງອອກສະບັບການຄົ້ນຫາສຳລັບປະກັບປະກອບປະກອງທີ່ສະບັບຊາວບິວດີສະໜັບສະໜູນສະບັບດັ່ງກ່າວ.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- ບ່ອນໜ້າໜ້າ grid-auto-rows
- ບ່ອນໜ້າຫນ້າ grid-column-end
