រំលងទៅខ្លឹមសារមេ
LibraTool logoLibraTool

ម៉ាស៊ីនបង្កើត CSS Grid ឥតគិតថ្លៃ

រចនា CSS grid ដោយមើលឃើញ — track ឯកតា និងគម្លាត — ហើយចម្លង CSS និង HTML ដែលបង្កើត។

ធ្វើការក្រៅបណ្តាញនៅពេលបានផ្ទុករួច
ការកំណត់ជាមុន
ជួរឈរ (3)
ជួរដេក (2)
លទ្ធផលក្នុងពេលវេលាផ្ទាល់
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 រៀងរាល់ប្រឹក្សាធម្មតាក្នុងម៉ាកកម្មវិធីរបស់អ្នក — គ្មានអ្វីត្រូវបានផ្ទុក។

វាដំណើរការដោយរបៀបណា

រចនាក្រឡាចត្រង្គ CSS ដោយមើលឃើញ: បន្ថែមរហូតដល់ 8 ជួរឈរ និង 8 ជួរដេក កំណត់បន្ទាត់នីមួយៗទៅ fr, px, auto ឬ min/max-content ហើយកែសម្រួលគម្លាតជួរដេក/ជួរឈរ។ ការមើលជាមុនផ្ទាល់ដែលមានលេខរៀងធ្វើបច្ចុប្បន្នភាពភ្លាមៗ ហើយ CSS grid-template ដែលបានបង្កើត បូកនឹង HTML ត្រូវគ្នាគឺមួយចុចពីឃ្លីបបតរបស់អ្នក។

  1. 1
    កំណត់រូបរាងក្រឡាចត្រង្គ
    បន្ថែម/លុបជួរឈរ និងជួរដេកជាមួយ + និង −។
  2. 2
    កំណត់បន្ទាត់
    ជួរឈរ និងជួរដេកនីមួយៗមានឯកតាផ្ទាល់ខ្លួន (1fr, 100px, auto…)។
  3. 3
    កែសម្រួលគម្លាត
    គ្រាប់ចុចអូស row-gap និង column-gap ដាច់ដោយឡែក។
  4. 4
    ចម្លងកូដ
    CSS ត្រៀមរួចសម្រាប់ផលិតកម្ម និងគ្រោង HTML ត្រូវគ្នា។

អ្វីៗទាំងអស់ដំណើរការក្នុងកម្មវិធីរុករករបស់អ្នក — គ្មានអ្វីត្រូវបានផ្ទុកឡើងឡើយ។

ឧបករណ៍ពាក់ព័ន្ធ

↔️

ម៉ាស៊ីនបង្កើត CSS Flexbox

សាលកម្មចម្រើនលម្អិត flex direction, wrap, justify និង align ក្នុងលទ្ធផលក្នុងពេលវេលាផ្ទាល់ — ហើយចម្លងលេខកូដ CSS។

សាកល្បង
📐

បង្កើត CSS clamp()

បង្កើតតម្លៃ CSS clamp() fluid សម្រាប់ typography ឆ្លើយ និង spacing។ Set ទំហំ min/max និងជួរ viewport មើលការមើលជាមុនផ្ទាល់ ហើយចម្លង CSS ម្ដងបន្ទាត់។

សាកល្បង
📓

ក្រដាសបោះពុម្ព — ក្រដាសមានបន្ទាត់ ក្រាហ្វ ក្រឡាចុច និងក្រដាសតន្ត្រី (PDF)

បោះពុម្ពក្រដាសផ្ទាល់ខ្លួនរបស់អ្នក៖ មានបន្ទាត់ (បន្ទាត់ធំ ឬបន្ទាត់បែបមហាវិទ្យាល័យ) ក្រាហ្វ ក្រឡាចុច អ៊ីសូម៉ែត្រ ហាត់សរសេរដៃ បន្ទាត់ប្រាំសម្រាប់តន្ត្រី ឬកំណត់ត្រា Cornell ក្នុង A4, Letter, A5 ឬ Legal ពណ៌បន្ទាត់ណាក៏បាន ចំនួនទំព័រតាមត្រូវការ។ PDF វ៉ិចទ័រច្បាស់ ដែលបង្កើតក្នុងកម្មវិធីរុករករបស់អ្នក។

សាកល្បង

សំណួរដែលសួរជាញឹកញាប់