ປະກອບປະກອບການສະໜອງgrid

  • ການໄປກ່ອນ gap
  • ຕໍ່ໜ້າ grid-area

ການກໍານົດ ແລະ ການນໍາໃຊ້

ຜົນງານຂອງ grid ແມ່ນຜົນງານຂອງບັນດາປະພັນທີ່ລະບຸຢູ່ເທິງ:

ບໍ່ມີຄວາມລະອຽດ

CSS ການສອນ:ລະບົບສັບສັນ Grid Container

ຄວາມຈຳນວນ

ຕົວຢ່າງ 1

ສ້າງການກວດສອບສາມການ (ການທຳອິດຂອງວົງການຈະສູງ 150 ຕາມ):

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

ທຳການທີ່ຂ້ອຍຈະທຳການດັ່ງກ່າວ

ຕົວຢ່າງ 2

ກໍານົດສອງປະເທດທີ່ "item1" ບາດກັບສອງປະເທດທຳອິດຂອງສອງປະເທດທຳອິດ (ໃຊ້ການການກວດສອບຫ້າການ):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid:
    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:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

ທຳການທີ່ຂ້ອຍຈະທຳການດັ່ງກ່າວ

ສັບພາສາ CSS

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow[ grid-auto-columns[grid-auto-flow[ grid-auto-rows / grid-template-columns]

|initial|inherit;

ຄູ່ມື ການອະທິບາຍ
none ຄູ່ມືສົມບູນ. ບໍ່ມີການກໍານົດຄວາມສູງ ຫຼື ຄວາມຫຼາຍຂອງຈຳນວນການຕິດຕັ້ງ.
grid-template-rows / grid-template-columns ກໍານົດຄວາມສູງ ແລະ ຄວາມຫຼາຍຂອງຈຳນວນການຕິດຕັ້ງ.
grid-template-areas ກໍານົດວິທີການຕິດຕັ້ງທີ່ໃຊ້ບັນດາວັດຖຸທີ່ມີຊື່.
grid-template-rows / grid-auto-columns ກໍານົດຄວາມສູງ (ຄວາມຫຼາຍ) ທີ່ອອກຫຼັງຈາກການຕິດຕັ້ງ, ແລະຄວາມສູງທີ່ອອກຫຼັງຈາກການຕິດຕັ້ງ.
grid-auto-rows / grid-template-columns ກໍານົດຄວາມສູງ (ຄວາມຫຼາຍ) ທີ່ອອກຫຼັງຈາກການຕິດຕັ້ງ, ແລະການຕິດຕັ້ງ grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns ກໍານົດຄວາມສູງ (ຄວາມຫຼາຍ) ຂອງຈຳນວນການຕິດຕັ້ງ, ການຕິດຕັ້ງບັນດາວັດຖຸທີ່ອອກຫຼັງຈາກການຕິດຕັ້ງ, ແລະຄວາມສູງທີ່ອອກຫຼັງຈາກການຕິດຕັ້ງ.
grid-auto-flow grid-auto-rows / grid-template-columns ກໍານົດວິທີການຕິດຕັ້ງບັນດາບັນດາວັດຖຸທີ່ອອກຫຼັງຈາກການຕິດຕັ້ງອັດຕາ, ຄວາມສູງຂອງຈຳນວນການຕິດຕັ້ງ, ແລະການຕິດຕັ້ງ grid-template-columns.
initial ຕັດສິນຄັດບານດັ່ງກ່າວເປັນຄູ່ມືສົມບູນ. ຍົກຍ້ອງ: initial.
inherit ຍົກຍ້ອງສະໜັບສະໜູນບັນດາບານດັ່ງກ່າວຈາກປະຈຳປະກອບສັບພາສາພໍ່. ຍົກຍ້ອງ: inherit.

ລາຍລະອຽດດ້ານເຕັກນິກ

ຄູ່ມືສົມບູນ: none none none auto auto row
ການສະໜັບສະໜູນ: no
ການສ້າງການສະແດງ: yes, see individual properties. Please see:ປະສົມອັດຕາການສະແດງ.
ສະຖານະ: CSS Grid Layout Module Level 1
ສັບພາສາ JavaScript object.style.grid="250px / auto auto auto"

ການສະໜັບສະໜູນບານຍົນ

ຈຳນວນທີ່ຢູ່ໃນຕາມການຄົ້ນຫາຂອງບານດັ່ງກ່າວແມ່ນການສະໜັບສະໜູນຄັດຄະດີທໍາອິດຂອງບານດັ່ງກ່າວ.

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

ບໍ່ມີຄວາມລະອຽດ

ຄູ່ມື CSSປະສົມອັດຕາ grid-template-areas

ຄູ່ມື CSSປະສົມອັດຕາ grid-template-rows

ຄູ່ມື CSSປະສົມອັດຕາ grid-template-columns

ຄູ່ມື CSSປະສົມອັດຕາ grid-auto-rows

ຄູ່ມື CSSປະສົມອັດຕາ grid-auto-columns

ຄູ່ມື CSSປະສົມອັດຕາ grid-auto-flow

ຄູ່ມື CSSປະສົມອັດຕາ grid-row-gap

ຄູ່ມື CSSປະສົມອັດຕາ grid-column-gap

  • ການໄປກ່ອນ gap
  • ຕໍ່ໜ້າ grid-area