CSS Grid

ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមរបស់ Bootstrap តំណាងឱ្យចំណុចកំពូលនៃបច្ចេកទេសប្លង់ CSS ជាងមួយទសវត្សរ៍ ដែលបានសាកល្បង និងសាកល្បងដោយមនុស្សរាប់លាននាក់។ ប៉ុន្តែ វាក៏ត្រូវបានបង្កើតដោយគ្មានលក្ខណៈពិសេស និងបច្ចេកទេស CSS ទំនើបជាច្រើនដែលយើងកំពុងឃើញនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតដូចជា CSS Grid ថ្មី។

របៀបដែលវាដំណើរការ

ជាមួយនឹង Bootstrap 5 យើងបានបន្ថែមជម្រើសដើម្បីបើកប្រព័ន្ធក្រឡាចត្រង្គដាច់ដោយឡែកដែលត្រូវបានបង្កើតឡើងនៅលើ CSS Grid ប៉ុន្តែជាមួយនឹង Bootstrap twist ។ អ្នកនៅតែទទួលបានថ្នាក់ អ្នកអាចអនុវត្តដោយចេតនាដើម្បីបង្កើតប្លង់ឆ្លើយតប ប៉ុន្តែជាមួយនឹងវិធីសាស្រ្តផ្សេងពីក្រោមក្រណាត់។

• CSS Grid ត្រូវបានជ្រើសរើសចូល។ បិទប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមដោយកំណត់ $enable-grid-classes: falseនិងបើកដំណើរការក្រឡាចត្រង្គ CSS ដោយការកំណត់ $enable-cssgrid: true។ បន្ទាប់មក ចងក្រង Sass របស់អ្នកឡើងវិញ។

• ជំនួសឧទាហរណ៍ .rowជាមួយ .grid. ថ្នាក់ .gridកំណត់ display: gridនិងបង្កើតមួយ grid-templateដែលអ្នកបង្កើតជាមួយ HTML របស់អ្នក។

• ជំនួស .col-*ថ្នាក់ជាមួយ .g-col-*ថ្នាក់។ នេះគឺដោយសារតែជួរឈរ CSS Grid របស់យើងប្រើ grid-columnលក្ខណៈសម្បត្តិជំនួសឱ្យ width.

• ជួរ​ឈរ និង​ទំហំ​ទឹក​ត្រូវ​បាន​កំណត់​តាម​រយៈ​អថេរ CSS ។ កំណត់វានៅលើមេ .gridនិងប្ដូរតាមបំណងតាមដែលអ្នកចង់បាន បញ្ចូលក្នុងបន្ទាត់ ឬក្នុងសន្លឹករចនាប័ទ្មជាមួយ --bs-columnsនិង --bs-gap.

នៅពេលអនាគត Bootstrap ទំនងជានឹងផ្លាស់ប្តូរទៅជាដំណោះស្រាយកូនកាត់ ដោយសារ gapអចលនទ្រព្យនេះទទួលបានការគាំទ្រស្ទើរតែពេញលេញសម្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិតសម្រាប់ flexbox ។

ភាពខុសគ្នាសំខាន់ៗ

បើប្រៀបធៀបទៅនឹងប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើម៖

• ឧបករណ៍ប្រើប្រាស់ Flex មិនប៉ះពាល់ដល់ជួរឈរ CSS Grid តាមរបៀបដូចគ្នានោះទេ។

• ចន្លោះជំនួសទឹកស្អុយ។ ទ្រព្យសម្បត្តិ gapជំនួសផ្ដេក paddingពីប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមរបស់យើង ហើយមានមុខងារច្រើនទៀតដូចជា margin.

• ដូច្នេះ មិនដូច .rows, .grids មិនមានរឹមអវិជ្ជមានទេ ហើយឧបករណ៍ប្រើប្រាស់រឹមមិនអាចប្រើដើម្បីផ្លាស់ប្តូរ gutters ក្រឡាចត្រង្គបានទេ។ គម្លាតក្រឡាចត្រង្គត្រូវបានអនុវត្តតាមលំនាំដើម និងផ្ដេក។ សូមមើល ផ្នែកប្ដូរតាមបំណង សម្រាប់ព័ត៌មានលម្អិតបន្ថែម។

• រចនាប័ទ្មខាងក្នុង និងផ្ទាល់ខ្លួនគួរតែត្រូវបានមើលថាជាការជំនួសសម្រាប់ថ្នាក់កែប្រែ (ឧទាហរណ៍ style="--bs-columns: 3;"ទល់នឹង class="row-cols-3")។

• Nesting ដំណើរការប្រហាក់ប្រហែលគ្នា ប៉ុន្តែអាចតម្រូវឱ្យអ្នកកំណត់ចំនួនជួរឈររបស់អ្នកឡើងវិញនៅលើឧទាហរណ៍នីមួយៗនៃ nested .grid។ សូមមើល ផ្នែកសំបុក សម្រាប់ព័ត៌មានលម្អិត។

ឧទាហរណ៍

ជួរឈរបី

ជួរឈរទទឹងស្មើគ្នាចំនួនបីនៅគ្រប់ច្រកចូលមើល និងឧបករណ៍ទាំងអស់អាចត្រូវបានបង្កើតដោយប្រើ .g-col-4ថ្នាក់។ បន្ថែម ថ្នាក់ឆ្លើយតប ដើម្បីផ្លាស់ប្តូរប្លង់តាមទំហំទិដ្ឋភាព។

<div class="grid">
  <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 មធ្យម និងខ្ពស់ជាងនេះ។

<div class="grid">
  <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>

ប្រៀបធៀបវាទៅនឹងប្លង់ជួរឈរទាំងពីរនេះនៅគ្រប់ច្រកចូលមើល។

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

រុំ

ធាតុក្រឡាចត្រង្គរុំដោយស្វ័យប្រវត្តិទៅបន្ទាត់បន្ទាប់ នៅពេលដែលមិនមានបន្ទប់ទៀតទេ។ ចំណាំថាវា gapអនុវត្តចំពោះគម្លាតផ្ដេក និងបញ្ឈររវាងធាតុក្រឡាចត្រង្គ។

<div class="grid">
  <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។ ថ្នាក់ចាប់ផ្តើមគឺខ្លីសម្រាប់អតីត។ ផ្គូផ្គងពួកវាជាមួយថ្នាក់ជួរឈរតាមទំហំ និងតម្រឹមជួរឈររបស់អ្នកតាមតែអ្នកត្រូវការ។ ថ្នាក់ចាប់ផ្តើមចាប់ផ្តើម 1ដូច 0តម្លៃមិនត្រឹមត្រូវសម្រាប់លក្ខណៈសម្បត្តិទាំងនេះ។

<div class="grid">
  <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) ធាតុក្រឡាចត្រង្គនីមួយៗនឹងមានទំហំដោយស្វ័យប្រវត្តិទៅជាជួរឈរមួយ។

<div class="grid">
  <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>

ឥរិយាបថនេះអាចត្រូវបានលាយបញ្ចូលគ្នាជាមួយនឹងថ្នាក់ជួរឈរក្រឡាចត្រង្គ។

<div class="grid">
  <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 របស់យើងអនុញ្ញាតឱ្យមានភាពងាយស្រួលក្នុងការដាក់ .grids ។ ទោះយ៉ាងណាក៏ដោយ មិនដូចលំនាំដើមទេ ក្រឡាចត្រង្គនេះទទួលមរតកការផ្លាស់ប្តូរនៅក្នុងជួរ ជួរឈរ និងចន្លោះ។ ពិចារណាឧទាហរណ៍ខាងក្រោម៖

• យើងបដិសេធចំនួនជួរឈរលំនាំដើមជាមួយនឹងអថេរ CSS មូលដ្ឋាន៖ --bs-columns: 3.
• នៅក្នុងជួរឈរស្វ័យប្រវត្តិដំបូង ចំនួនជួរឈរត្រូវបានទទួលមរតក ហើយជួរឈរនីមួយៗគឺមួយភាគបីនៃទទឹងដែលមាន។
• នៅ​ក្នុង​ជួរ​ឈរ​ស្វ័យប្រវត្តិ​ទីពីរ យើង​បាន​កំណត់​ការ​រាប់​ជួរ​ឈរ​ឡើង​វិញ​នៅ​លើ​ខ្ទង់ .grid​ទៅ 12 (លំនាំដើម​របស់​យើង)។
• ជួរ​ឈរ​ស្វ័យប្រវត្តិ​ទី​បី​មិន​មាន​មាតិកា​ដែល​ជាប់​គាំង​ទេ។

នៅក្នុងការអនុវត្ត នេះអនុញ្ញាតឱ្យមានប្លង់ស្មុគ្រស្មាញ និងផ្ទាល់ខ្លួនបន្ថែមទៀត បើប្រៀបធៀបទៅនឹងប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមរបស់យើង។

<div class="grid" 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 មូលដ្ឋាន។

អថេរ CSS ទាំងនេះមិនមានតម្លៃលំនាំដើមទេ។ ជំនួសមកវិញ ពួកវាអនុវត្តតម្លៃជំនួសដែលត្រូវបានប្រើ រហូតដល់ ឧទាហរណ៍ក្នុងតំបន់ត្រូវបានផ្តល់ឱ្យ។ ឧទាហរណ៍ យើងប្រើ var(--bs-rows, 1)សម្រាប់ជួរក្រឡាក្រឡាចត្រង្គ CSS របស់យើង ដែលមិនអើពើ --bs-rowsព្រោះវាមិនទាន់ត្រូវបានកំណត់នៅកន្លែងណានៅឡើយ។ នៅពេលដែលវាគឺ .gridវត្ថុនឹងប្រើតម្លៃនោះជំនួសឱ្យតម្លៃជំនួសនៃ 1.

មិនមានថ្នាក់ក្រឡាចត្រង្គទេ។

ធាតុកុមារភ្លាមៗ .gridគឺជាធាតុក្រឡាចត្រង្គ ដូច្នេះពួកវានឹងមានទំហំដោយមិនបន្ថែម .g-colថ្នាក់ច្បាស់លាស់។

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

ជួរឈរនិងចន្លោះ

លៃតម្រូវចំនួនជួរឈរនិងគម្លាត។

<div class="grid" 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>

<div class="grid" 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>

ការបន្ថែមជួរ

បន្ថែម​ជួរ​ដេក​បន្ថែម​ទៀត និង​ផ្លាស់​ប្តូរ​ការ​ដាក់​ជួរ​ឈរ៖

<div class="grid" 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អាចត្រូវបានកែប្រែតាមតម្រូវការ។

<div class="grid" 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>

ដោយសារតែនោះ អ្នកអាចមាន s បញ្ឈរ និងផ្ដេកផ្សេងគ្នា gapដែលអាចយកតម្លៃតែមួយ (ភាគីទាំងអស់) ឬតម្លៃគូ (បញ្ឈរ និងផ្ដេក)។ នេះអាចត្រូវបានអនុវត្តជាមួយនឹងរចនាប័ទ្មក្នុងបន្ទាត់សម្រាប់ gapឬជាមួយ --bs-gapអថេរ CSS របស់យើង។

<div class="grid" 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 របស់អ្នកឡើងវិញ។
• ប្រើ​រចនាប័ទ្ម​ក្នុង​ជួរ​ឬ​ផ្ទាល់​ខ្លួន​ដើម្បី​បង្កើន​ថ្នាក់​ដែល​បាន​ផ្តល់។

ឧទាហរណ៍ អ្នកអាចបង្កើនចំនួនជួរឈរ និងផ្លាស់ប្តូរទំហំគម្លាត ហើយបន្ទាប់មកកំណត់ទំហំ "ជួរឈរ" របស់អ្នកជាមួយនឹងការលាយបញ្ចូលគ្នានៃរចនាប័ទ្មក្នុងជួរ និងថ្នាក់ជួរឈរ CSS Grid ដែលបានកំណត់ជាមុន (ឧទាហរណ៍ .g-col-4) ។

<div class="grid" 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>