စတွဲ အစီအစဥ် အကွဲ

1
2
3
4
5
6
7
8

亲自试一试

ဗီဇ အကွန်ပျူတာ

HTML အရာ ကို ဗီဇ အကွန်ပျူတာ အဖြစ် အသုံးပြုရန် ကျွန်ုပ် အသုံးပြုပါကြား: display ဗီဇ ကို grid သို့မဟုတ် inline-grid အသုံးပြုပါကြား。

ဗီဇ အကွန်ပျူတာ သည် လက်ပံ နှင့် အကွက် အတွင်း အခွဲအုပ် အရာများ ဖြင့် ဖွဲ့စည်းထားသည်。

grid-template-columns ဗီဇ

grid-template-columns ဗီဇ ကို ဗီဇ အတွင်း လက်ပံ အရွယ် အား အသုံးပြုပြီး လက်ပံ အရွယ် ကို အသုံးပြုနိုင်သည်。

အဆိုပါ ဗီဇ သည် အချိန်ချိန်နှင့် အားလုံး ကို သုံးပြုသော စာရင်းဖြစ်ပြီး အချိန်ချိန် တစ်ခုခု ကို အဆိုပါ အကွက် အကျယ်အဝန်း အား အသုံးပြုသည်。

ဗီဇ ကို 4 လက်ပံ ဗီဇ ကို အသုံးပြုရန် ကျွန်ုပ် အသုံးပြုပါကြား 4 လက်ပံ အကျယ်အဝန်း ကို အသုံးပြုပါကြား; အခြား လက်ပံ အကျယ်အဝန်း အတူ အကျယ်အဝန်း အတူ ဖြစ်သည်ဆိုခဲ့လျှင် "auto" အသုံးပြုပါကြား。

实例

4 လက်ပံ ဗီဇ ကို ထုတ်လုပ်ပါကြား:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

亲自试一试

注意：4 လက်ပံ ဗီဇ အတွင်း 4 ခုထက် ပိုသော အရာများ ရှိလျှင် ဗီဇ သည် အခြား အကွက် ကို အသုံးပြုပြီး အရာများ ကို ထည့်သွင်းသည်。

grid-template-columns ဗီဇ ကို လက်ပံ အရွယ် (အကျယ်အဝန်း) ကို အသုံးပြုနိုင်သည်。

实例

အဆိုပါ 4 လက်ပံ အရွယ် ကို အသုံးပြုပါကြား:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

亲自试一试

grid-template-rows ဗီဇ

grid-template-rows ဗီဇ ကို အဆိုပါ အကွက် အမြင့် အား အသုံးပြုသည်。

1
2
3
4
5
6
7
8

အဆိုပါ ဗီဇ သည် အချိန်ချိန်နှင့် အားလုံး ကို သုံးပြုသော စာရင်းဖြစ်ပြီး အချိန်ချိန် တစ်ခုခု ကို အဆိုပါ အကွက် အမြင့် အား အသုံးပြုသည်。

实例

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

亲自试一试

justify-content ဗီဇ

justify-content ဗီဇ ကို အဆိုပါ ကွန်ပျူတာ အတွင်း အုပ်စု တစ်ခုလုံး အုပ်စျယ်ရန် အသုံးပြုသည်。

1
2
3
4
5
6
7
8

注意：အဆိုပါ ဗီဇ ကို အသုံးပြုရာတွင် ကွန်ပျူတာ အကျယ်အဝန်း ကောင်းကင် အောက်မှ အဆိုပါ ဗီဇ ကို အသုံးပြုနိုင်သည် ဟု အဆိုပါ ဗီဇ သည် ပိုမို ကြီးသည် ဖြစ်ပါ၏。

实例

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

亲自试一试

实例

.grid-container {
  display: grid;
  justify-content: space-around;
}

亲自试一试

实例

.grid-container {
  display: grid;
  justify-content: space-between;
}

亲自试一试

实例

.grid-container {
  display: grid;
  justify-content: center;
}

亲自试一试

实例

.grid-container {
  display: grid;
  justify-content: start;
}

亲自试一试

实例

.grid-container {
  display: grid;
  justify-content: end;
}

亲自试一试

align-content ဗီဇ

align-content 属性用于垂直对齐容器内的整个网格。

1
2
3
4
5
6
7
8

注意：网格的总高度必须小于容器的高度，这样 align-content 属性才能生效。

实例

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

亲自试一试

实例

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

亲自试一试

实例

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

亲自试一试

实例

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

亲自试一试

实例

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

亲自试一试

实例

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

亲自试一试