စတုရန်း လိုင်း အဆိုပါ

Header
Menu
Main
Right
Footer

亲自试一试

အဆင်းအစိတ်စီးပွားရေး

CSS အဆင်းအစိတ်စီးပွားရေးစည်းကမ်း (CSS Grid Layout Module) သည် အဆင်းအစိတ်နှင့် အဆင်းအစိတ်များဖြင့် အစီးပွားရေးအခြေခံအဖြစ် ပြုလုပ်သည်၊ အဆင်းအစိတ်နှင့် အဆင်းအစိတ်များကို အသုံးပြုပြီး စီးပွားရေးကို လုပ်ကိုင်နိုင်သည်။

ဘာသာပြန်

အဆင်းအစိတ်အချက်အလက်များသည် အနောက်တန်းသုံး ဘာသာပြန်သည်:

57.0 16.0 52.0 10 44

အဆင်းအစိတ်အကြောင်းအရာ

အဆင်းအစိတ်စီးပွားရေးသည် အဖိုင်အချုပ် တစ်ခုနှင့် အပိုင်းအခွဲများ တစ်ခုခုနှင့် ပြတ်သက်သည်:

实例

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

亲自试一试

Display အချက်အလက်

HTML အကြောင်းအရာ၏ display အချက်အလက်ကို grid နှင့် inline-grid ဖြစ်ပါက

实例

.grid-container {
  display: grid;
}

亲自试一试

实例

.grid-container {
  display: inline-grid;
}

亲自试一试

အဆင်းအစိတ်အကြောင်းအရာများ၏ အချို့သော အပိုင်းအခွဲများ သည် အဆင်းအစိတ်အကြောင်းအရာဖြစ်သည်:

အဆင်းအစိတ် (Grid Columns)

အဆင်းအစိတ်အကြောင်းအရာများ၏ အဆိုင်ချက်အသရုပ်သည် အဆင်းအစိတ်ဖြစ်သည်:

အဆင်းအစိတ်အကြောင်းအရာ (Grid Rows)

အဆင်းအစိတ်အကြောင်းအရာများ၏ အဆိုင်ချက်အသရုပ်သည် အကြောင်းအရာဖြစ်သည်:

အဆင်းအစိတ် (Grid Gaps)

အဆင်းအစိတ်/အကြောင်းအရာများအကြား အစိတ်အခြား အမည်များ:

အချက်အလက်တစ်ခုခုကို အသုံးပြုပြီး အစိတ်အခြား အရွယ်အစား ကို ပြင်ဆင်နိုင်ပါသည်:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

实例

grid-column-gap အချက်အလက်သည် အဆင်းအစိတ်များအကြား အစိတ်အခြား အသုံးပြုသည်:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

亲自试一试

实例

grid-row-gap အချက်အလက်သည် အကြောင်းအရာများအကြား အစိတ်အခြား အသုံးပြုသည်:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

亲自试一试

实例

grid-gap အချက်အလက်မှာ grid-row-gap နှင့် grid-column-gap အချက်အလက်များ၏ အစိတ်အသက်များဖြစ်သည်:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

亲自试一试

实例

grid-gap အချက်အလက်များသည် အကြောင်းအရာများအကြား အစိတ်အခြား နှင့် အဆင်းအစိတ်အကြား အသုံးပြုနိုင်သည်:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

亲自试一试

网格行（Grid Lines）

列之间的线称为列线（column lines）。

行之间的线称为行线（row lines）。

当把网格项目放在网格容器中时，请引用行号：

实例

把网格项目放在列线 1，并在列线 3 结束它：

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

亲自试一试

实例

把网格项目放在行线 1，并在行线 3 结束它：

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

亲自试一试