ມາດຕະການ CSS grid-template

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

ຜົນງານ grid-template ແມ່ນຜົນງານຫຍັງພາສານລວມທັງ:

ບໍ່ບໍ່ບັນທຶກ:

ຄູ່ມວນຊົນ CSS:ປະສົມຄູ່ມູນຄະານ grid

ຄູ່ມວນຊົນ CSS:ຜົນງານ grid-area

ຄູ່ມວນຊົນ CSS:ຜົນງານ grid-template-rows

ຄູ່ມວນຊົນ CSS:ຜົນງານ grid-template-columns

ຄູ່ມວນຊົນ CSS:ຜົນງານ grid-template-areas

ຄວາມຄິດຕົວ

ຕົວຢ່າງ 1

ສ້າງການຈັດການສາຍສາມກິດຂະໜາດ 150 ຕາມລະດັບພາກສານ:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

ທົດລອງດັ່ງກ່າວ:

例子 2

规定两行，其中 "item1" 横跨前两行中的前两列（在一个五列网格布局中）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

ທົດລອງດັ່ງກ່າວ:

ຕົວຢ່າງ 3

ລະບຸທັງໝົດຂອງບັນດາບັນຫາຫຼັງຈາກນັ້ນສ້າງຮູບແບບເວັບໄຊທີ່ມີຄວາມປອດໄພ.

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

ທົດລອງດັ່ງກ່າວ:

ສັບພາສາ CSS:

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
ຄວາມຈຸດພິກັດຄວາມຈຸດພິກັດ
ຄວາມຈຸດພິກັດ ການອະທິບາຍ
none ຈຸດພິກັດສົມບູນ. ບໍ່ຕັດສິນຄັດຂະໜາດການຈຳນວນຂອງການຈຳນວນຂອງການຈຳນວນຂອງການຈຳນວນ.
grid-template-rows / grid-template-columns ຕັດສິນຄັດຂອງຂະໜາດການຈຳນວນຂອງການຈຳນວນຂອງການຈຳນວນຂອງການຈຳນວນ.
grid-template-areas ຕັດສິນຄັດການສະແດງຕາຕະລາງສະແດງການສະແດງຕາຕະລາງສະແດງການສະແດງຕາຕະລາງ.
initial ຕັດສິນຄັດຄວາມປອດໄພຂອງຄວາມປອດໄພຂອງຄວາມປອດໄພຂອງຄວາມປອດໄພ. ບັນດາຄວາມເຫັນດັ່ງກ່າວ: initial.
inherit ຍິນຍອມການສະຫຼັບຄອມເບຣສສະແດງການສະຫຼັບຄວາມປອດໄພຂອງປະການດັ່ງກ່າວ. ບັນດາຄວາມເຫັນດັ່ງກ່າວ: inherit.

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

ຈຸດພິກັດສົມບູນ: none none none
ການສະຫຼັບ: ບໍ່
ການສະແດງອິນສະໄຫມ: ສະຫຼັບ. ບັນດາຄວາມເຫັນດັ່ງກ່າວ:ການສະແດງທາງອິນສະໄຫມ.
ສະຖານະການ: CSS Grid Layout Module Level 1
ສັບພາສາ JavaScript: object.style.gridTemplate="250px / auto auto"

ການສະຫຼັບບັນຍານອິດສະຫຼະການ

ຈຳນວນອີກທີ່ບັນທຶກໃນຕາຕະລາງສະແດງອອກສະແດງການສະຫຼັບການສະຫຼັບຄອມເບຣສທີ່ສະຫຼັບຄວາມປອດໄພຂອງປະການດັ່ງກ່າວ.

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