ປະເພດ CSS gap

  • ເບື້ອງຫຼັງ font-weight
  • ເພີ່ມບັນຫາຕໍ່ໄປ grid

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

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

ເຫັນດີ:gap ʻອກອາກາດໄດ້ຖືກອະນຸຍາດຫຼັງຈາກ: grid-gap.

ອີງຕາມ:

CSS ʻອກອາກາດCSS ʻອກອາກາດ

CSS ʻອກອາກາດCSS grid layout

CSS ʻອກອາກາດCSS multi-column layout

CSS ʻອກອາກາດrow-gap ʻອກອາກາດ

CSS ʻອກອາກາດcolumn-gap ʻອກອາກາດ

ຄວາມນັບຫຼັກ

ຕົວຢ່າງ 1

ການກະກຽມຄວາມຫຼາຍຂອງການຈັດການ row ແລະ column ໃຫ້ກັບ 50px:

.grid-container {
  gap: 50px;
}

ທົດລອງຕະຫຼອດຕົວເລກຂອງທ່ານ:

ຕົວຢ່າງ 2: grid layout

ການກະກຽມຄວາມຫຼາຍຂອງການຈັດການ grid ໃຫ້ກັບ 20px ແລະ 50px:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

ທົດລອງຕະຫຼອດຕົວເລກຂອງທ່ານ:

ຕົວຢ່າງ 3: flexbox layout

ການກະກຽມຄວາມຫຼາຍຂອງການຈັດການ flexbox ໃຫ້ກັບ 20px ແລະ 70px:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

ທົດລອງຕະຫຼອດຕົວເລກຂອງທ່ານ:

ຕົວຢ່າງ 4: multi-column layout

ການກະກຽມຄວາມຫຼາຍຂອງການຈັດການ multi-column ໃຫ້ກັບ 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

ທົດລອງຕະຫຼອດຕົວເລກຂອງທ່ານ:

ສັບສັນ CSS

gap: row-gap column-gap|initial|inherit;
ຄູ່ມັດ ການອະທິບາຍ
row-gap ການກະກຽມຄວາມຫຼາຍຂອງບັນດາການຈັດການ row ໃນ grid ຫຼື flexbox.
column-gap ການກະກຽມຄວາມຫຼາຍຂອງບັນດາການຈັດການ grid, flexbox ຫຼື multi-column.
initial ປ່ຽນບັນດາບັນດາຄວາມນີ້ໃຫ້ເປັນຄູ່ມັດທີ່ມີສະເພາະ. ເບິ່ງຫຼາຍກວ່າ: initial.
inherit ສະໜັບສະໜູນບັນດາບັນດາຄວາມນີ້ຈາກປະຈຳປະຈຳຕົວເລກ. ເບິ່ງຫຼາຍກວ່າ: inherit.

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

ຄູ່ມັດທີ່ມີສະເພາະ: normal normal
ສະທ້ອນ: ບໍ່
ການອອກອາກາດ: ສະໜັບສະໜູນ. ບັນປະເທດວິທີຂອງບັນດາບັນດາຄວາມ:ບັນດາບັນດາຄວາມທີ່ກ່ຽວກັບການອອກອາກາດ.
ລະດັບ: CSS Box Alignment Module Level 3
ສັບສັນ JavaScript: object.style.gap="50px 100px"

ການສະໜັບສະໜູນບັນດາຊາວ

ຈຳນວນບັນທຶກໃນຕາມບັນຊີແບບດັ່ງກ່າວຢູ່ໃນຕາມບັນຊີແບບດັ່ງກ່າວຢູ່ທີ່ບັນດາຊາວບັນດາບັນຊີແບບດັ່ງກ່າວຢູ່ທີ່ບັນດາຊາວບັນດາບັນຊີແບບດັ່ງກ່າວຢູ່ທີ່ບັນດາຊາວ

ການຈັດການ Chrome IE / Edge Firefox Safari Opera
ໃນgrid 66 16 61 12 53
ໃນອຸປະກອນຄວາມສະດວກ 84 84 63 14.1 70
ໃນສາຍຕອນຫຼາຍ 66 16 61 ບໍ່ສາມາດສະໜັບສະໜູນ 53
  • ເບື້ອງຫຼັງ font-weight
  • ເພີ່ມບັນຫາຕໍ່ໄປ grid