ຄວາມປະສົມຂອງບັນຍັດ CSS grid-area

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

grid-area ສະຖານທີຂອງບັນດາວັດຖຸ grid-item ແລະທີ່ຢູ່ໃນການຈັດວາງ grid layout, ມັນເປັນຄວາມຍິງຂອງບັນດາປະສົງທີ່ລາວມີ:

ປະສົງ grid-area ສາມາດນຳໃຊ້ເພື່ອຈັດວາງຊື່ບັນດາວັດຖຸທີ່ສະແດງວ່າ grid-item. ຫຼັງຈາກນັ້ນ, ສາມາດນຳໃຊ້ສະຖານທີ່ grid-container grid-template-areas ປະສົງຂອງບັນດາບັນດາວັດຖຸທີ່ສະແດງວ່າ grid-item. ບັນດາຕົວຢ່າງຖືກອະທິບາຍຢູ່ດ້ານລາຍລະອຽດລາວ

ບໍ່ວ່າຈະເຫັນ:

CSS Tutorial:ການຈັດວາງ CSS Grid

ຄວາມຄິດ

ຕົວຢ່າງ 1

ເຮັດໃຫ້ "item1" ຕົ້ນຈາກປະຕູກາງທີ 2 ກາງທີ 1 ແລະຫຼຸດອອກຫຼາຍອັນສອງຈາກທີ 2 ເປັນຫຼາຍອັນສາມກາງທີ 1:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

ທໍາອິດການທົດລອງຕົນເອງ

ຄຳເຕືອນ:ມີຫຼັກການຕັ້ງສະຖານທີ່ຢູ່ດ້ານບັດບາງຂອງເວັບໄຊ

ສານດັບ CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

ຄູ່ມູນທາງປະສົງ

ຄູ່ມູນ ອະທິບາຍ
grid-row-start ກໍານົດຈາກປະຕູກາງໃນກາງທີ່ຈະສະແດງບັນດາບັນດາວັດຖຸ
grid-column-start ກໍານົດຈາກປະຕູກັນໃນກາງຕາກາງທີ່ຈະສະແດງບັນດາບັນດາວັດຖຸ
grid-row-end ກໍານົດທີ່ຈະຢຸດສະແດງວັດຖຸໃນເສັ້ນກາງສອງປະຕູແລະຈະຂ້າມສອງປະຕູ.
grid-column-end ກໍານົດທີ່ຈະຢຸດສະແດງວັດຖຸໃນເສັ້ນກາງກາງສອງປະຕູແລະຈະຂ້າມສອງປະຕູ.
itemname ກໍານົດວັດຖຸຂອງການຈັດກອງຂາຍພາບ.

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

ຄູ່ກະຈາຍຢ່າງມັດຈຳນວນດຽວ: auto / auto / auto / auto
ລວມມາບັນດາການຮັບຢູ່: ບໍ່
ການສ້າງອາກາດ: ສະໜັບສະໜູນ. ບັນດາອີງຕາມ:ປະສົມປະສານການອອກອາກາດ.
ສະຖານະການ: CSS Grid Layout Module Level 1
ສັບພາສາ JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

ຕົວຢ່າງຫຼາຍກວ່າ:

ຕົວຢ່າງ 2

Item1 ຖືກນຳມານຳວ່າ "myArea" ແລະຈະຂ້າມຫ້າກາງໃນການຈັດກອງຂາຍພາບຂອງຫ້າກາງ:

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

ທໍາອິດການທົດລອງຕົນເອງ

ຕົວຢ່າງ 3

ທໍາອິດການທົດລອງ "myArea" ທີ່ຈະຂ້າມສອງປະຕູໃນການຈັດກອງຂາຍພາບຂອງຫ້າກາງ (ຈຸດນັ້ນຈະອະທິບາຍບໍ່ມີຊື່ວັດຖຸ):

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

ທໍາອິດການທົດລອງຕົນເອງ

ຕົວຢ່າງ 4

ທໍາອິດການທົດລອງ "item1" ທີ່ຂ້າມສອງປະຕູແລະສອງຫຼັງ:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

ທໍາອິດການທົດລອງຕົນເອງ

ຕົວຢ່າງ 5

ນຳມານຳນັກບັນຈຸທັງໝົດແລະສ້າງແບບຂາຍແບບເວັບໄຊທີ່ຈະມີການສະແດງຕົວຢ່າງທັງໝົດ:

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

ທໍາອິດການທົດລອງຕົນເອງ

ການສະໜັບສະໜູນບັນນາທິການ

ຈຳນວນໃນຕາຕະລາງອອກສະແດງການສະໜັບສະໜູນສະບາຍດັ່ງກ່າວຂອງການບັນຈຸທໍາອິດທີ່ເປັນໄປໄດ້.

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