CSS Grid

មាតិកា

ជួរដេក និងជួរឈរជាមួយគ្នា
កំណត់ជួរឈរ និងជួរដេក
ឯកតា fr, repeat() និង gap
ការដាក់ Item
Named Area៖ គូរ Layout របស់អ្នក
Grid ដែល Responsive ដោយមិនប្រើ Media Query
ការតម្រឹមក្នុង Grid
Grid ឬ Flexbox?
រូបមន្ត៖ Page Layout និង Gallery
សាកល្បងដោយខ្លួនឯង

1. ជួរដេក និងជួរឈរជាមួយគ្នា

Flexbox រៀប item តាមបន្ទាត់ មួយ។ CSS Grid រៀបពួកវាក្នុង ពីរវិមាត្រ — ជួរដេក និងជួរឈរក្នុងពេលតែមួយ ដូចជា spreadsheet ឬ layout កាសែត។ សូមប្រើវានៅពេលអ្នកចង់រៀបរបស់ឲ្យត្រង់គ្នាទាំងពីរទិស។

ដូច Flexbox ដែរ វាចាប់ផ្តើមពី parent៖

.gallery {
  display: grid;
}

Parent ក្លាយជា grid container ហើយកូនផ្ទាល់របស់វាក្លាយជា grid item។ ដោយខ្លួនវាផ្ទាល់ នេះផ្លាស់ប្តូរតិចតួចណាស់ — អ្នកក៏ត្រូវពិពណ៌នាអំពី track (ជួរឈរ និងជួរដេក) ផងដែរ។

2. កំណត់ជួរឈរ និងជួរដេក

grid-template-columns រាយបញ្ជីទទឹងនៃជួរឈរនីមួយៗ ហើយ grid-template-rows រាយបញ្ជីកម្ពស់នៃជួរដេកនីមួយៗ៖

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

នោះបង្កើតបានជួរឈរបី៖ មួយថេរនៅ 200px ហើយពីរចែករំលែកផ្នែកដែលនៅសល់។ កូនបំពេញក្រឡាពីឆ្វេងទៅស្តាំ បន្ទាប់មកចាប់ផ្តើមជួរដេកថ្មីនៅពេលជួរឈរអស់។ ជួរដេកត្រូវបានបង្កើតដោយស្វ័យប្រវត្តិ ដោយមានកម្ពស់ស្មើនឹងមាតិការបស់វា ដូច្នេះច្រើនតែគ្រាន់តែត្រូវកំណត់ជួរឈរប៉ុណ្ណោះ។

 200px         1fr            1fr
┌───────┬──────────────┬──────────────┐
│   1   │      2       │      3       │   row 1
├───────┼──────────────┼──────────────┤
│   4   │      5       │      6       │   row 2
└───────┴──────────────┴──────────────┘

3. ឯកតា fr, repeat() និង gap

ឯកតា fr គឺជាប្រភាគនៃ លំហទំនេរ នៅក្នុង grid។ វាគឺជា flex: 1 ក្នុងកំណែរបស់ Grid៖

Declaration	លទ្ធផល
`1fr 1fr 1fr`	ជួរឈរបីស្មើគ្នា
`1fr 2fr`	ជួរឈរពីរ ដែលទីពីរទូលាយជាងទ្វេដង
`200px 1fr`	Sidebar ថេរ និងជួរឈរមេដែលបត់បែនបាន

repeat() ជួយកុំឲ្យវាយច្រើន៖

grid-template-columns: repeat(3, 1fr);   /* same as 1fr 1fr 1fr */

gap បន្ថែមលំហរវាងជួរដេក និងជួរឈរ ដូចគ្នាបេះបិទនឹងក្នុង Flexbox៖

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

ជួរឈរបីស្មើគ្នា ជាមួយ gap នៅចន្លោះ ក្នុងបួនបន្ទាត់។ អ្នកក៏អាចកំណត់ row-gap និង column-gap ដោយឡែកពីគ្នាបានដែរ។

4. ការដាក់ Item

ជាធម្មតា item ត្រូវបានដាក់ដោយស្វ័យប្រវត្តិ តាមលំដាប់។ នៅពេលអ្នកចង់ឲ្យមួយគ្របលើក្រឡាច្រើនជាងមួយ សូមប្រាប់វា៖

.featured {
  grid-column: span 2;      /* take up two columns */
}

.hero {
  grid-column: 1 / -1;      /* from first line to the last line */
}

បន្ទាត់ grid ត្រូវបានដាក់លេខចាប់ពី 1 ហើយ -1 គឺជាបន្ទាត់ចុងក្រោយ ដូច្នេះ 1 / -1 មានន័យថា "ទទឹងពេញ"។ grid-row: span 2 ធ្វើដូចគ្នាចុះក្រោម។ អ្នកក៏អាចដាក់ឈ្មោះបន្ទាត់ជាក់លាក់បានដែរ — grid-column: 2 / 4 ចាប់ផ្តើមនៅបន្ទាត់ទី 2 ហើយបញ្ចប់នៅបន្ទាត់ទី 4។

5. Named Area៖ គូរ Layout របស់អ្នក

លក្ខណៈពិសេសដែលអានបានងាយបំផុតរបស់ Grid អនុញ្ញាតឲ្យអ្នក គូរ layout ជាអត្ថបទដោយប្រើ grid-template-areas៖

.page {
  display: grid;
  grid-template-columns: 14rem 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 1rem;
  min-height: 100vh;
}

.page > header  { grid-area: header; }
.page > aside   { grid-area: sidebar; }
.page > main    { grid-area: main; }
.page > footer  { grid-area: footer; }

String នីមួយៗគឺជាជួរដេក ហើយពាក្យនីមួយៗគឺជាក្រឡា។ ការសរសេរឈ្មោះដដែលម្តងទៀតធ្វើឲ្យវាគ្របលើក្រឡាច្រើន។ រូបភាពក្នុង CSS ត្រូវគ្នានឹងរូបភាពលើអេក្រង់៖

┌──────────────────────────────┐
│           header             │
├──────────┬───────────────────┤
│ sidebar  │       main        │
├──────────┴───────────────────┤
│           footer             │
└──────────────────────────────┘

ដើម្បីរៀបចំឡើងវិញសម្រាប់ទូរស័ព្ទ អ្នកគ្រាន់តែកំណត់ template ឡើងវិញ (មើលជំពូកទី 11) — HTML នៅដដែល ហើយនៅតែអានតាមលំដាប់សមហេតុផលសម្រាប់ screen reader។

6. Grid ដែល Responsive ដោយមិនប្រើ Media Query

Pattern ដែលល្បីបំផុតរបស់ Grid គឺ gallery ដែលកំណត់ចំនួនជួរឈរដោយខ្លួនឯង ផ្អែកលើទទឹងដែលមាន៖

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

សូមអានវាថា៖ "បង្កើតជួរឈរឲ្យបានច្រើនតាមដែលអាចដាក់សម ដោយនីមួយៗទទឹងយ៉ាងតិច 14rem និងយ៉ាងច្រើនស្មើនឹងចំណែកស្មើគ្នានៃលំហ។"

minmax(14rem, 1fr) គឺជាជួរឈរដែលមិនដែលចង្អៀតជាង 14rem ប៉ុន្តែអាចពង្រីកបាន។
auto-fit បង្កើតជួរឈរបែបនោះឲ្យបានច្រើនតាមដែលអាចដាក់សមក្នុងជួរដេក។

នៅលើអេក្រង់ធំ៖ បួនជួរឈរ។ នៅលើ tablet៖ ពីរ។ នៅលើទូរស័ព្ទ៖ មួយ។ ហើយមិនដូចកំណែ Flexbox នៅជំពូកទី 9 ទេ ជួរដេកនីមួយៗមានទទឹងជួរឈរដូចគ្នា ដូច្នេះជួរដេកចុងក្រោយមិនដែលត្រូវបានលាតធំទេ។ សូមប្រើមួយនេះមុនគេ នៅពេលអ្នកសាងសង់បញ្ជីនៃ card ណាមួយ។

ជំនួយ៖ បើ grid មិនគួរប្រើលំហតិចពេកនៅលើអេក្រង់តូចៗ សូមសរសេរ minmax(min(14rem, 100%), 1fr) ដើម្បីឲ្យជួរឈរអាចបង្រួមតូចជាង 14rem នៅពេល container ចង្អៀតជាងនោះ។

7. ការតម្រឹមក្នុង Grid

Property សម្រាប់តម្រឹមពី Flexbox ក៏ដំណើរការនៅទីនេះដែរ ដោយមានឈ្មោះដូចគ្នា៖

Property	នៅឯណា	ធ្វើអ្វី
`justify-items`	Container	តម្រឹម item ផ្ដេក នៅក្នុងក្រឡារបស់វា
`align-items`	Container	តម្រឹម item បញ្ឈរនៅក្នុងក្រឡារបស់វា
`place-items: center`	Container	Shorthand៖ ទាំងពីរក្នុងពេលតែមួយ
`justify-content`, `align-content`	Container	ដាក់ grid ទាំងមូលនៅក្នុង container
`justify-self`, `align-self`	Item មួយ	បដិសេធតម្លៃសម្រាប់ item តែមួយ

ការដាក់អ្វីមួយត្រង់កណ្តាលទាំងពីរទិស គឺ display: grid; place-items: center; — ខ្លីជាងបីបន្ទាត់របស់ Flexbox ទៅទៀត។

8. Grid ឬ Flexbox?

ពួកវាមិនមែនជាគូប្រជែងគ្នាទេ ទំព័រភាគច្រើនប្រើទាំងពីរ។ ច្បាប់មួយដែលដំណើរការ៖

ប្រើ…	នៅពេល…
Flexbox	អ្នករៀប item ក្នុង ទិសតែមួយ ហើយ មាតិកា គួរកំណត់ទំហំ៖ navbar, ក្រុមប៊ូតុង, toolbar, layout ខាងក្នុង card
Grid	អ្នករៀប ទំព័រ ឬតំបន់មួយ ជាជួរដេក និងជួរឈរ ហើយ layout គួរកំណត់ទំហំ៖ page template, gallery, dashboard

វិធីសួរមួយទៀត៖ "តើខ្ញុំខ្វល់ពីការតម្រឹមឆ្លងកាត់ជួរដេកទេ?" បើបាទ/ចាស — ជួរឈរដែលត្រង់គ្នាពីជួរដេកមួយទៅជួរដេកមួយ — សូមប្រើ Grid។ បើអ្នកខ្វល់តែពីការចែក item តាមបន្ទាត់មួយ សូមប្រើ Flexbox។

អ្នកអាចដាក់ពួកវាទ្រនាប់គ្នាដោយសេរី៖ page layout របស់ Grid មាន <header> ដែលជា navbar របស់ Flexbox និង gallery របស់ Grid នៃ card ដែល card នីមួយៗប្រើ Flexbox ដើម្បីខ្ទាស់ប៊ូតុងរបស់វាទៅខាងក្រោម។

9. រូបមន្ត៖ Page Layout និង Gallery

ផ្សំបំណែកទាំងនេះ។ នៅក្នុង index.html សូម wrap project នានាក្នុង gallery៖

<section id="projects">
  <h2>Projects</h2>
  <div class="gallery">
    <article class="card">…</article>
    <article class="card">…</article>
    <article class="card">…</article>
  </div>
</section>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
}

.card .button {
  margin-top: auto;     /* pushes the button to the bottom of every card */
}

នោះគឺជាឧបករណ៍ទាំងពីរក្នុង component តែមួយ៖ Grid សម្រាប់ gallery, Flexbox នៅខាងក្នុង card នីមួយៗ ដើម្បីឲ្យប៊ូតុងតម្រឹមនៅខាងក្រោម ទោះបីជា card នីមួយៗមានអត្ថបទប៉ុន្មានក៏ដោយ។

សម្រាប់ទំព័រ About សូមប្រើ named area សម្រាប់ layout ពីរជួរឈរ ដោយមានរូបថតនៅជាប់អត្ថបទ៖

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .about {
    grid-template-columns: 12rem 1fr;
    align-items: start;
  }
}

Rule @media គឺជាប្រធានបទនៃជំពូកបន្ទាប់។ សម្រាប់ពេលនេះ សូមជឿថាវាមានន័យថា "នៅពេលអេក្រង់មានទទឹងយ៉ាងតិច 40rem សូមប្រើពីរជួរឈរ។"

10. សាកល្បងដោយខ្លួនឯង

ជួរឈរស្មើគ្នា។ បង្កើត grid មួយដែលមានប្រអប់ 6 ជាមួយ repeat(3, 1fr)។ បន្ថែម gap។ បន្ទាប់មកប្តូរវាទៅ 1fr 2fr 1fr។
ពិនិត្យវា។ នៅក្នុង DevTools សូមចុចស្លាក grid នៅជាប់ container ដើម្បីបង្ហាញ overlay ដែលមានបន្ទាត់ដាក់លេខ។ តើបន្ទាត់មួយណាជាចុងនៃជួរឈរទីពីរ?
Span។ ធ្វើឲ្យប្រអប់ទីមួយជា grid-column: span 2។ តើមានអ្វីកើតឡើងចំពោះប្រអប់ដែលនៅសល់? បន្ទាប់មកសាកល្បង grid-row: span 2។
គូរទំព័រមួយ។ សាងសង់ layout header/sidebar/main/footer ពីផ្នែកទី 5 ជាមួយ grid-template-areas នៅលើទំព័រសាកល្បងមួយ។
សាងសង់ gallery។ បន្ថែម gallery ដែលប្រើ auto-fit ទៅ project របស់អ្នក។ ប្តូរទំហំ window ឲ្យយឺតៗ ហើយរាប់ជួរឈរនៅទទឹងនីមួយៗ។
ប្រៀបធៀបជាមួយ Flexbox។ បង្កើត card ដូចគ្នាជាមួយកំណែ Flexbox ពីជំពូកទី 9 និងជាមួយ Grid។ បន្ថែម card ទី 5។ តើមួយណាដោះស្រាយជួរដេកចុងក្រោយបានល្អជាង?
ដាក់អ្វីក៏ដោយត្រង់កណ្តាល។ ប្រើ display: grid; place-items: center; ដើម្បីដាក់សារមួយត្រង់កណ្តាលក្នុង div ដែលមានកម្ពស់ពេញ។

Commit។ អ្នកមានឧបករណ៍ទាំងអស់ហើយ ជំពូកចុងក្រោយនិយាយអំពីការធ្វើឲ្យទំព័រដំណើរការបានល្អលើគ្រប់អេក្រង់ ហើយបន្ទាប់មកដាក់វាលើអ៊ីនធឺណិត។

CSS Grid

ទិញកាហ្វេជូនខ្ញុំ