ປະເພດ CSS grid-auto-flow

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

ການບັນທືກ grid-auto-flow ຄວບຄຸມວິທີທີ່ບັນດາອົງກອນສະແດງຈະຖືກວາງເຂົ້າໃນລະບົບສະແດງ.

ບໍ່ວ່າ:

ການສອນ CSS:CSS Grid Layout

ຄວາມຄິດ:

ຕົວຢ່າງ 1

ສະແດງບັນດາອົງກອນທີ່ສະແດງການວາງທາງອອກມາຕາມກອງທີ່ຫຼັງຈາກກອງທີ່ຫາຍ.

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

ສະແດງຄວາມຄິດຂອງຕົນເອງ:

ຕົວຢ່າງ 2

ວາງບັນດາຈຸດກວມເອົາທຸກຈຸດທີ່ມີພົນພາສາຂອງລະບົບສະແດງທັງໝົດດ້ວຍຄວາມຄິດ "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

ສະແດງຄວາມຄິດຂອງຕົນເອງ:

ສັບພາສາ CSS:

grid-auto-flow: row|column|dense|row dense|column dense;

ຄູ່ມູນການວັດຈາກ:

ຄູ່ມູນ: ການອະທິບາຍ:
row ຄູ່ມູນສະເລ່ຍ. ວາງບັນດາອົງກອນໃນທຸກຈຸດກວມເອົາທຸກຈຸດທີ່ມີພົນພາສາຂອງລະບົບສະແດງ.
column ວາງບັນດາອົງກອນໃນທຸກຈຸດກວມເອົາທຸກຈຸດທີ່ມີພົນພາສາຂອງລະບົບສະແດງ.
dense ວາງບັນດາອົງກອນໃນທຸກຈຸດກວມເອົາທີ່ມີພົນພາສາຂອງລະບົບສະແດງ.
row dense ວາງບັນດາອົງກອນໃນທຸກຈຸດກວມເອົາທຸກຈຸດທີ່ມີພົນພາສາຂອງລະບົບສະແດງ.
column dense ວາງບັນດາອົງກອນໃນທຸກຈຸດກວມເອົາທີ່ມີພົນພາສາຂອງລະບົບສະແດງ.

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

ຄູ່ມູນສະເລ່ຍ. ສະແດງບັນດາອົງກອນທັງໝົດດ້ວຍການຄວບຄຸມທຸກຈຸດກວມເອົາ. row
ນຳໄປສູ່: ບໍ່.
ສະແດງການສະແດງອິນລະນານິວັນ: ສະບາຍ:ປະສົມປະສານທີ່ກ່ຽວກັບການສະແດງ..
ຮູບແບບ: CSS Grid Layout Module Level 1
ສັບພາສາ JavaScript: object.style.gridAutoFlow="row dense"

ການສະບາຍບັນດາການບັດຈຸບານຊີວິດ.

ຕົວແທນທີ່ບາງບັນດາການບັດຈຸຄົ້ນຄວ້າວ່າຈະສະບາຍບັນດາລັກສະນະທີ່ສຸດທ້າຍທີ່ສະບາຍ.

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