ລະບົບ CSS grid-template-columns
- ບໜ້າກ່ອນ grid-template-areas
- ບໜ້າຫລັງ grid-template-rows
ການກໍານົດແລະການນໍາໃຊ້
grid-template-columns 属性ຕັ້ງຂອງຈຳນວນວົງກອງ(ແລະຂະໜາດ)ໃນການຈັດການວົງກອງ.
ຄວາມມູນຄ່ານີ້ແມ່ນລາຍການທີ່ສະແດງໂດຍຈຳນວນຄັນດ້ວຍຈຳນວນຄັນ, ແລະແຕ່ລະຄວາມມູນຄ່າຈະສະແດງສະໜາມການຄວາມຍາວຂອງວົງກອງທີ່ຂ້ອຍ.
ບໍ່ອອກລວມ:
CSS 教程:CSS Grid Layout
ຊັບສະນະບັນນາທິການ CSSgrid-template-rows 属性
ຊັບສະນະບັນນາທິການ CSSgrid-template 属性
ຕົວຢ່າງ
ຕົວຢ່າງ 1
ສ້າງສັບພາຍໃນສີ່ວົງກອງ:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
ຕົວຢ່າງ 2
ສ້າງວົງກອງສີ່ວົງກອງ, ແລະຕັ້ງຂະໜາດວົງກອງຕ່າງໆ:
.grid-container {
display: grid;
grid-template-columns: 30px 200px auto 100px;
}
ສານຍິງ CSS
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
ຄວາມມູນຄ່າຂອງລັກສະນະ
| ຄວາມມູນຄ່າ | ການອະທິບາຍ |
|---|---|
| none | ມູນຄ່າສະເລ່ຍ. ການສ້າງວົງກອງໃນຕອນທີ່ຈຳເປັນ. |
| auto | ຂະໜາດວົງກອງຈະຕັ້ງຈາກຂະໜາດຂອງສັບພາຍໃນແລະຈຳນວນສິ່ງທີ່ຢູ່ໃນວົງກອງ. |
| max-content | ຈະຕັ້ງຂະໜາດວົງກອງຕາມຈຳນວນສິ່ງທີ່ໃຫຍ່ທີ່ສຸດໃນວົງກອງ. |
| min-content | ຈະຕັ້ງຂະໜາດວົງກອງຕາມຈຳນວນສິ່ງທີ່ນ້ອຍທີ່ສຸດໃນວົງກອງ. |
| length | ການຕັ້ງຂະໜາດວົງກອງ, ຜ່ານການນໍາໃຊ້ອັດຕາລະດັບຄວາມຍາວທີ່ຖືກກວດຄວາມຖືກການກວດສອບ. ບັນປະຊາການ:ອັດຕາລະດັບຄວາມຍາວ. |
| initial | ຈະຍິນຍອມບັນດາລັກສະນະນີ້ຫາມູນຄ່າສະເລ່ຍ. ບັນປະຊາການ: initial. |
| inherit | ຈະຍິນຍອມບັນດາລັກສະນະນີ້ຈາກປະຈຳສັບພາຍໃນ. ບັນປະຊາການ: inherit. |
ຂໍ້ມູນດ້ານເຕັກນິກ
| ມູນຄ່າສະເລ່ຍ: | none |
|---|---|
| ການຮຽກຮ້ອງ: | ບໍ່ |
| ການສ້າງການອອກອາກາດ: | ການສະໜັບສະໜູນ. ບັນປະຊາການ:ລັກສະນະທາງການອອກອາກາດ. |
| ສະຖານະການ: | CSS Grid Layout Module Level 1 |
| ສານຍິງ JavaScript: | object.style.gridTemplateColumns="50px 50px 50px" |
ການສະໜັບສະໜູນບັນນາທິການ
ຈຳນວນທີ່ໃນຕາຕະລາງອາດບອກກັບການສະໜັບສະໜູນຂອງບັນດາບັນນາທິການທຳອິດທີ່ສະໜັບສະໜູນບັນດາລັກສະນະນີ້.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- ບໜ້າກ່ອນ grid-template-areas
- ບໜ້າຫລັງ grid-template-rows
