ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
Check
in English

CSS Grid

ຮຽນ​ຮູ້​ວິ​ທີ​ການ​ເປີດ​ໃຊ້​ງານ, ການ​ນໍາ​ໃຊ້, ແລະ​ປັບ​ແຕ່ງ​ລະ​ບົບ​ການ​ສະ​ຫຼັບ​ຂອງ​ພວກ​ເຮົາ​ທີ່​ສ້າງ​ຂຶ້ນ​ຢູ່​ໃນ CSS Grid ດ້ວຍ​ຕົວ​ຢ່າງ​ແລະ​ຂໍ້​ມູນ​ຂອງ​ລະ​ຫັດ.

ໃນໜ້ານີ້

ລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນຂອງ Bootstrap ສະແດງໃຫ້ເຫັນເຖິງຈຸດສູງສຸດຂອງເຕັກນິກການຈັດວາງ CSS ຫຼາຍກວ່າທົດສະວັດ, ພະຍາຍາມ ແລະທົດສອບໂດຍຄົນຫຼາຍລ້ານຄົນ. ແຕ່, ມັນຍັງຖືກສ້າງຂື້ນໂດຍບໍ່ມີຄຸນລັກສະນະ CSS ແລະເຕັກນິກທີ່ທັນສະໄຫມຫຼາຍທີ່ພວກເຮົາເຫັນຢູ່ໃນຕົວທ່ອງເວັບເຊັ່ນ CSS Grid ໃຫມ່.

ແຈ້ງເຕືອນ - ລະບົບ CSS Grid ຂອງພວກເຮົາແມ່ນທົດລອງ ແລະເລືອກໃຊ້ໃນ v5.1.0! ພວກເຮົາໄດ້ລວມເອົາມັນໄວ້ໃນ CSS ຂອງເອກະສານຂອງພວກເຮົາເພື່ອສະແດງໃຫ້ທ່ານເຫັນ, ແຕ່ມັນຖືກປິດໄວ້ໂດຍຄ່າເລີ່ມຕົ້ນ. ສືບຕໍ່ອ່ານເພື່ອຮຽນຮູ້ວິທີເປີດໃຊ້ມັນໃນໂຄງການຂອງທ່ານ.

ມັນເຮັດວຽກແນວໃດ

ດ້ວຍ Bootstrap 5, ພວກເຮົາໄດ້ເພີ່ມທາງເລືອກໃນການເປີດໃຊ້ລະບົບຕາຂ່າຍໄຟຟ້າແຍກຕ່າງຫາກທີ່ສ້າງຂຶ້ນໃນ CSS Grid, ແຕ່ມີການບິດ Bootstrap. ທ່ານຍັງໄດ້ຮັບຫ້ອງຮຽນທີ່ທ່ານສາມາດສະຫມັກຂໍເອົາໃນຄວາມກະຕືລືລົ້ນເພື່ອສ້າງການຈັດວາງທີ່ຕອບສະຫນອງ, ແຕ່ມີວິທີການທີ່ແຕກຕ່າງກັນພາຍໃຕ້ຜ້າຄຸມ.

  • CSS Grid ແມ່ນເລືອກເຂົ້າ. ປິດໃຊ້ງານລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນໂດຍການຕັ້ງຄ່າ $enable-grid-classes: falseແລະເປີດໃຊ້ CSS Grid ໂດຍການຕັ້ງຄ່າ $enable-cssgrid: true. ຫຼັງຈາກນັ້ນ, recompile Sass ຂອງທ່ານ.

  • ແທນທີ່ຕົວຢ່າງ .rowຂອງ .grid. ຊັ້ນ .gridຮຽນກໍານົດ display: gridແລະສ້າງສິ່ງ grid-templateທີ່ທ່ານສ້າງດ້ວຍ HTML ຂອງທ່ານ.

  • ແທນ .col-*ທີ່ຫ້ອງຮຽນດ້ວຍ .g-col-*ຫ້ອງຮຽນ. ນີ້ແມ່ນຍ້ອນວ່າຖັນ CSS Grid ຂອງພວກເຮົາໃຊ້ grid-columnຄຸນສົມບັດແທນ width.

  • ຖັນແລະຂະຫນາດ gutter ຖືກກໍານົດໂດຍຜ່ານຕົວແປ CSS. ຕັ້ງຄ່າສິ່ງເຫຼົ່ານີ້ຢູ່ໃນພໍ່ແມ່ .gridແລະປັບແຕ່ງຕາມທີ່ທ່ານຕ້ອງການ, ຢູ່ໃນແຖວ ຫຼືໃນແຜ່ນສະໄຕລ໌, ດ້ວຍ --bs-columnsແລະ --bs-gap.

ໃນອະນາຄົດ, Bootstrap ອາດຈະປ່ຽນໄປສູ່ການແກ້ໄຂແບບປະສົມຍ້ອນວ່າ gapຊັບສິນໄດ້ບັນລຸການສະຫນັບສະຫນູນເກືອບເຕັມຂອງຕົວທ່ອງເວັບສໍາລັບ flexbox.

ຄວາມແຕກຕ່າງທີ່ ສຳ ຄັນ

ເມື່ອປຽບທຽບກັບລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນ:

  • Flex Utilities ບໍ່ມີຜົນກະທົບຕໍ່ຖັນ CSS Grid ໃນທາງດຽວກັນ.

  • ຊ່ອງຫວ່າງທົດແທນ gutters. gapຊັບສິນປ່ຽນແທນລວງນອນ ຈາກ paddingລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນຂອງພວກເຮົາ ແລະເຮັດໜ້າທີ່ຄືກັບ margin.

  • ດັ່ງນັ້ນ, ບໍ່ເຫມືອນກັບ .rows, .grids ບໍ່ມີຂອບທາງລົບແລະຜົນປະໂຫຍດຂອງຂອບບໍ່ສາມາດຖືກນໍາໃຊ້ເພື່ອປ່ຽນ gutters ຕາຂ່າຍໄຟຟ້າ. ຊ່ອງຫວ່າງຂອງຕາຂ່າຍຖືກນຳໃຊ້ຕາມແນວນອນ ແລະແນວຕັ້ງຕາມຄ່າເລີ່ມຕົ້ນ. ເບິ່ງ ພາກສ່ວນການປັບແຕ່ງ ສຳລັບລາຍລະອຽດເພີ່ມເຕີມ.

  • ຮູບແບບໃນແຖວ ແລະແບບກຳນົດເອງຄວນຖືກເບິ່ງເປັນການທົດແທນສຳລັບຊັ້ນຮຽນຂອງຕົວແກ້ໄຂ (ເຊັ່ນ: style="--bs-columns: 3;"ທຽບກັບ class="row-cols-3").

  • Nesting ເຮັດວຽກຄ້າຍຄືກັນ, ແຕ່ອາດຈະຮຽກຮ້ອງໃຫ້ທ່ານປັບການນັບຖັນຂອງທ່ານຢູ່ໃນແຕ່ລະຕົວຢ່າງຂອງ nested .grid. ເບິ່ງ ພາກສ່ວນຮັງ ສໍາລັບລາຍລະອຽດ.

ຕົວຢ່າງ

ສາມຖັນ

ສາມຖັນທີ່ມີຄວາມກວ້າງເທົ່າທຽມກັນໃນທົ່ວຊ່ອງເບິ່ງແລະອຸປະກອນທັງຫມົດສາມາດຖືກສ້າງຂື້ນໂດຍໃຊ້ .g-col-4ຊັ້ນຮຽນ. ເພີ່ມ ຫ້ອງຮຽນທີ່ຕອບ ສະໜອງ ເພື່ອປ່ຽນໂຄງຮ່າງຕາມຂະໜາດຂອງຊ່ອງເບິ່ງ.

.g-col-4
.g-col-4
.g-col-4
html 
<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

ຕອບສະໜອງ

ໃຊ້ຊັ້ນຮຽນແບບຕອບສະໜອງເພື່ອປັບໂຄງຮ່າງຂອງທ່ານໃນທົ່ວຊ່ອງເບິ່ງ. ໃນທີ່ນີ້ພວກເຮົາເລີ່ມຕົ້ນດ້ວຍສອງຄໍລໍາໃນ viewports ແຄບທີ່ສຸດ, ແລະຫຼັງຈາກນັ້ນຂະຫຍາຍຕົວເປັນສາມຖັນໃນ viewports ຂະຫນາດກາງແລະຂ້າງເທິງ.

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
html 
<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

ປຽບທຽບກັບໂຄງຮ່າງຖັນສອງອັນນີ້ຢູ່ໃນທຸກຊ່ອງເບິ່ງ.

.g-col-6
.g-col-6
html 
<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ຫໍ່

ລາຍ​ການ​ຕາ​ຂ່າຍ​ໄຟ​ຟ້າ​ອັດ​ຕະ​ໂນ​ມັດ​ໄປ​ແຖວ​ຕໍ່​ໄປ​ໃນ​ເວ​ລາ​ທີ່​ບໍ່​ມີ​ຫ້ອງ​ຫຼາຍ​ໃນ​ລວງ​ນອນ​. ຈື່ໄວ້ວ່າ gapໃຊ້ກັບຊ່ອງຫວ່າງແນວນອນ ແລະແນວຕັ້ງລະຫວ່າງລາຍການຕາໜ່າງ.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ເລີ່ມ

ຫ້ອງຮຽນເລີ່ມຕົ້ນມີຈຸດປະສົງເພື່ອທົດແທນຊັ້ນຮຽນຊົດເຊີຍຂອງຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນຂອງພວກເຮົາ, ແຕ່ພວກມັນບໍ່ຄືກັນໝົດ. CSS Grid ສ້າງແມ່ແບບຕາຂ່າຍຜ່ານຮູບແບບທີ່ບອກຕົວທ່ອງເວັບໃຫ້ "ເລີ່ມຕົ້ນທີ່ຄໍລໍານີ້" ແລະ "ສິ້ນສຸດໃນຄໍລໍານີ້." ຄຸນສົມບັດເຫຼົ່ານັ້ນແມ່ນ grid-column-startແລະ grid-column-end. ຫ້ອງຮຽນເລີ່ມຕົ້ນແມ່ນ shorthand ສໍາລັບອະດີດ. ຈັບຄູ່ພວກເຂົາກັບຫ້ອງຮຽນຖັນເພື່ອຂະຫນາດແລະຈັດຖັນຂອງທ່ານຕາມທີ່ທ່ານຕ້ອງການ. ຫ້ອງຮຽນເລີ່ມຕົ້ນເລີ່ມຕົ້ນດ້ວຍ ຄ່າ 1ທີ່ 0ບໍ່ຖືກຕ້ອງສໍາລັບຄຸນສົມບັດເຫຼົ່ານີ້.

.g-col-3 .g-start-2
.g-col-4 .g-start-6
html 
<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

ຖັນອັດຕະໂນມັດ

ເມື່ອບໍ່ມີຊັ້ນຮຽນໃນລາຍການຕາໜ່າງ (ເດັກນ້ອຍທັນທີຂອງ a .grid), ແຕ່ລະລາຍການຕາຂ່າຍຈະຖືກປັບຂະໜາດເປັນຖັນໜຶ່ງໂດຍອັດຕະໂນມັດ.

1
1
1
1
1
1
1
1
1
1
1
1
html 
<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ພຶດຕິກໍານີ້ສາມາດຖືກປະສົມກັບຫ້ອງຮຽນຖັນຕາຂ່າຍໄຟຟ້າ.

.g-col-6
1
1
1
1
1
1
html 
<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ຮັງ

ຄ້າຍຄືກັນກັບລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນຂອງພວກເຮົາ, CSS Grid ຂອງພວກເຮົາອະນຸຍາດໃຫ້ສ້າງຮັງໄດ້ງ່າຍ .grid. ແນວໃດກໍ່ຕາມ, ບໍ່ເຫມືອນກັບຄ່າເລີ່ມຕົ້ນ, ຕາຂ່າຍໄຟຟ້ານີ້ສືບທອດການປ່ຽນແປງໃນແຖວ, ຖັນ, ແລະຊ່ອງຫວ່າງ. ພິຈາລະນາຕົວຢ່າງຂ້າງລຸ່ມນີ້:

  • ພວກເຮົາ override ຈໍານວນເລີ່ມຕົ້ນຂອງຖັນທີ່ມີຕົວແປ CSS ທ້ອງຖິ່ນ: --bs-columns: 3.
  • ໃນຖັນອັດຕະໂນມັດທໍາອິດ, ການນັບຖັນແມ່ນສືບທອດ ແລະແຕ່ລະຖັນແມ່ນໜຶ່ງສ່ວນສາມຂອງຄວາມກວ້າງທີ່ມີຢູ່.
  • ໃນຖັນອັດຕະໂນມັດທີສອງ, ພວກເຮົາໄດ້ຕັ້ງການນັບຖັນຄືນໃໝ່ໃນແຖວທີ່ຕິດຢູ່ .gridເປັນ 12 (ຄ່າເລີ່ມຕົ້ນຂອງພວກເຮົາ).
  • ຖັນອັດຕະໂນມັດທີສາມບໍ່ມີເນື້ອຫາຊ້ອນກັນ.

ໃນທາງປະຕິບັດນີ້ອະນຸຍາດໃຫ້ມີການຈັດວາງທີ່ຊັບຊ້ອນ ແລະແບບກຳນົດເອງຫຼາຍຂຶ້ນເມື່ອປຽບທຽບກັບລະບົບຕາຂ່າຍເລີ່ມຕົ້ນຂອງພວກເຮົາ.

ຖັນອັດຕະໂນມັດທຳອິດ
ຖັນອັດຕະໂນມັດ
ຖັນອັດຕະໂນມັດ
ຖັນອັດຕະໂນມັດທີສອງ
6 ຈາກທັງໝົດ 12
4 ຈາກທັງໝົດ 12
2 ຈາກທັງໝົດ 12
ຖັນອັດຕະໂນມັດທີສາມ
html 
<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

ປັບແຕ່ງ

ປັບແຕ່ງຈໍານວນຖັນ, ຈໍານວນແຖວ, ແລະຄວາມກວ້າງຂອງຊ່ອງຫວ່າງດ້ວຍຕົວແປ CSS ທ້ອງຖິ່ນ.

ຕົວແປ ຄ່າຕອບແທນ ລາຍລະອຽດ
--bs-rows 1 ຈຳນວນແຖວໃນແມ່ແບບຕາໜ່າງຂອງເຈົ້າ
--bs-columns 12 ຈຳນວນຖັນໃນແມ່ແບບຕາຂ່າຍຂອງທ່ານ
--bs-gap 1.5rem ຂະໜາດຂອງຊ່ອງຫວ່າງລະຫວ່າງຖັນ (ຕັ້ງ ແລະແນວນອນ)

ຕົວແປ CSS ເຫຼົ່ານີ້ບໍ່ມີຄ່າເລີ່ມຕົ້ນ; ແທນທີ່ຈະ, ພວກມັນໃຊ້ຄ່າທົດແທນທີ່ຖືກນໍາໃຊ້ ຈົນກ່ວາ ການສະຫນອງຕົວຢ່າງທ້ອງຖິ່ນ. ຕົວຢ່າງ, ພວກເຮົາໃຊ້ var(--bs-rows, 1)ສໍາລັບແຖວ CSS Grid ຂອງພວກເຮົາ, ເຊິ່ງບໍ່ສົນໃຈ --bs-rowsເພາະວ່າມັນຍັງບໍ່ທັນໄດ້ກໍານົດບ່ອນໃດກໍ່ຕາມ. ເມື່ອມັນເປັນ, .gridinstance ຈະໃຊ້ຄ່ານັ້ນແທນຄ່າ fallback ຂອງ 1.

ບໍ່ມີຫ້ອງຮຽນຕາຕະລາງ

ອົງປະກອບຂອງເດັກນ້ອຍໃນທັນທີ .gridແມ່ນລາຍການຕາໜ່າງ, ສະນັ້ນພວກມັນຈະຖືກປັບຂະໜາດໂດຍບໍ່ຕ້ອງເພີ່ມ .g-colຊັ້ນຮຽນຢ່າງຈະແຈ້ງ.

ຖັນອັດຕະໂນມັດ
ຖັນອັດຕະໂນມັດ
ຖັນອັດຕະໂນມັດ
html 
<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

ຖັນແລະຊ່ອງຫວ່າງ

ປັບຈໍານວນຄໍລໍາແລະຊ່ອງຫວ່າງ.

.g-col-2
.g-col-2
html 
<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>
.g-col-6
.g-col-4
html 
<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

ກຳລັງເພີ່ມແຖວ

ເພີ່ມແຖວເພີ່ມເຕີມ ແລະປ່ຽນການຈັດວາງຖັນ:

ຖັນອັດຕະໂນມັດ
ຖັນອັດຕະໂນມັດ
ຖັນອັດຕະໂນມັດ
html 
<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

ຊ່ອງຫວ່າງ

ການ​ປ່ຽນ​ແປງ​ຊ່ອງ​ຫວ່າງ​ຕັ້ງ​ພຽງ​ແຕ່​ໂດຍ​ການ​ປັບ​ປຸງ​ແກ້​ໄຂ row-gap. ໃຫ້ສັງເກດວ່າພວກເຮົາໃຊ້ gapໃນ .grids, ແຕ່ row-gapແລະ column-gapສາມາດດັດແປງໄດ້ຕາມຄວາມຕ້ອງການ.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ດ້ວຍເຫດນັ້ນ, ທ່ານສາມາດມີ gaps ຕັ້ງແລະແນວນອນທີ່ແຕກຕ່າງກັນ, ເຊິ່ງສາມາດເອົາຄ່າດຽວ (ທຸກດ້ານ) ຫຼືຄູ່ຂອງຄ່າ (ຕັ້ງແລະແນວນອນ). ນີ້ສາມາດຖືກນໍາໃຊ້ກັບຮູບແບບ inline ສໍາລັບ gap, ຫຼືກັບ --bs-gapຕົວແປ CSS ຂອງພວກເຮົາ.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ຊາສ

ຂໍ້ຈໍາກັດຫນຶ່ງຂອງ CSS Grid ແມ່ນວ່າຫ້ອງຮຽນເລີ່ມຕົ້ນຂອງພວກເຮົາຍັງຖືກສ້າງຂື້ນໂດຍສອງຕົວແປ Sass, $grid-columnsແລະ $grid-gutter-width. ອັນນີ້ ກຳ ນົດ ຈຳ ນວນຊັ້ນຮຽນທີ່ສ້າງຂື້ນໃນ CSS ທີ່ລວບລວມຂອງພວກເຮົາຢ່າງມີປະສິດທິພາບ. ທ່ານມີສອງທາງເລືອກທີ່ນີ້:

  • ແກ້ໄຂຕົວແປ Sass ເລີ່ມຕົ້ນເຫຼົ່ານັ້ນແລະລວບລວມ CSS ຂອງທ່ານຄືນໃຫມ່.
  • ໃຊ້ຮູບແບບໃນແຖວ ຫຼືແບບກຳນົດເອງເພື່ອເພີ່ມຊັ້ນຮຽນທີ່ສະໜອງໃຫ້.

ຕົວຢ່າງ, ທ່ານສາມາດເພີ່ມຈໍານວນຖັນແລະປ່ຽນຂະຫນາດຊ່ອງຫວ່າງ, ແລະຫຼັງຈາກນັ້ນຂະຫນາດ "ຄໍລໍາ" ຂອງທ່ານດ້ວຍການປະສົມຂອງຄໍລໍາ inline ແລະຫ້ອງຮຽນຖັນ CSS Grid ທີ່ກໍານົດໄວ້ກ່ອນ (ຕົວຢ່າງ, .g-col-4).

14 ຖັນ
.g-col-4
html 
<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>