grid-template-rows ဂုဏ်သတ္တိ

grid-template-rows ဂုဏ်သတ္တိသည် Grid သို့မဟုတ် ဇယားကွက်အတွင်း element တစ်ခု သိမ်းပိုက်မည့် အတန်းများ၏ အရေအတွက်နှင့် အနံကို သတ်မှတ်ပေးသည်။ ဂုဏ်သတ္တိ၏ တန်ဖိုးတွင် အတန်းများ၏ အနံကို မည်သည့် အရွယ်အစားယူနစ် ဖြင့်မဆို သတ်မှတ်နိုင်သည်။ ဤဂုဏ်သတ္တိကို မိဘ element တွင် သတ်မှတ်ပြီး ၎င်း၏ သားသမီး element များ၏ အတန်းအနံများကို သတ်မှတ်ပေးသည်။

ဂုဏ်သတ္တိများတွင် ပစ်ဆယ်များဖြင့် တန်ဖိုးများ သတ်မှတ်ပါက အတန်းများ၏ အရွယ်အစားများသည် ထိုတန်ဖိုးများနှင့် အတိအကျ ကိုက်ညီမည်။ auto စကားလုံးကို သတ်မှတ်ပါက အတန်းများသည် ရရှိနိုင်သော နေရာအကုန်လုံးကို ဖြည့်ပေးမည်။ fr (fraction) ယူနစ်ကို အသုံးပြုခြင်းသည် နေရာအကုန်လုံးကို တူညီသော အပိုင်းများအဖြစ် ခွဲဝေပေးမည် ဟု ဆိုလိုသည်။ fr ၏ အကျိုးကျေးဇူးမှာ ၎င်း၏ ကွဲပြားသော ကွန်တိန်နာများ သို့မဟုတ် စခရင်အဖြေများနှင့် လိုက်လျောညီထွေရှိမှုဖြစ်ပြီး အဘယ်ကြောင့်ဆိုသော် fr သည် ပစ်ဆယ်ဖြင့် တိကျသောအရွယ်အစားနှင့် ချိတ်ဆက်ခြင်းမရှိဘဲ ဖော်ပြထားသော အပိုင်းအစအရေအတွက်အလိုက် နေရာများကို ပုံမှန်ခွဲဝေပေးသောကြောင့် ဖြစ်သည်။

ဝါကျဖွဲ့စည်းပုံ

cssselector {
  grid-template-rows: အတန်း၏အနံ;
}

ဥပမာ

ကျွန်ုပ်တို့၏ Grid အတွင်းရှိ element များအတွက် အတန်းများ၏ အနံကို သတ်မှတ်ကြပါစို့။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ပထမနှင့် တတိယအတန်းကို ပစ်ဆယ်ဖြင့် ပုံသေအနံ သတ်မှတ်ပါမည်။ ဒုတိယအတန်းသည် ရရှိနိုင်သော နေရာကို အလိုအလျောက် ဖြည့်ပေးပါစေ။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ယခု grid-template-rows ဂုဏ်သတ္တိကို အသုံးပြု၍ ပထမနှင့် ဒုတိယအတန်းများသည် ကွန်တိန်နာ၏ တစ်စိတ်တစ်ပိုင်းကို ယူပြီး တတိယအတန်းသည် သုံးပိုင်းကို ယူအောင် လုပ်ကြည့်ပါမည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

fr ယူနစ်များဖြင့် သတ်မှတ်ထားသော တန်ဖိုးများသည် အပိုင်းကိန်းပုံစံဖြင့် ရှိနိုင်သည်။ ယခင်ဥပမာကို ပြောင်းလဲကာ ဒုတိယနှင့် တတိယအတန်းများအတွက် အနံကို အပိုင်းကိန်းများဖြင့် သတ်မှတ်ကြည့်ပါမည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

grid-template-rows ဂုဏ်သတ္တိတွင် repeat() လုပ်ဆောင်ချက်ကို ထည့်သွင်းကြည့်ပါမည်။ ဤလုပ်ဆောင်ချက်သည် ကွန်တိန်နာကို အတန်းသုံးခုစလုံး တူညီသောအနံ ရှိရမည်ဟု အသိပေးမည်ဖြစ်သည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ယခင်ဥပမာကို ပြောင်းလဲပြီး တူညီသောအတန်းသုံးခုအပြင် ကွန်တိန်နာ၏ အပိုင်းနှစ်ပိုင်းကို ယူမည့် စတုတ္ထအတန်း တစ်ခု ထပ်ထည့်ကြည့်ပါမည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr) 2fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ပထမအတန်းနှစ်ခုကို ကွန်တိန်နာ၏ အပိုင်းတစ်ပိုင်းစီ အနံသတ်မှတ်ပေးပြီး နောက်ဆုံးအတန်းနှစ်ခုကို အပိုင်းနှစ်ပိုင်းစီ အနံသတ်မှတ်ကြည့်ပါမည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ယခု အတန်းများ၏ အနံကို repeat() လုပ်ဆောင်ချက်ဖြင့် သတ်မှတ်ထားသော တန်ဖိုးများနှင့် လွတ်လပ်သော fr ယူနစ်များကို ပေါင်းစပ်၍ သတ်မှတ်ကြည့်ပါမည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

repeat() လုပ်ဆောင်ချက်တွင် auto-fill တန်ဖိုးကိုလည်း သတ်မှတ်နိုင်ပြီး ၎င်းသည် ကျွန်ုပ်တို့၏ ကွန်တိန်နာကို လိုအပ်သောအနံရှိသည့် တူညီသောအတန်းများဖြင့် ဖြည့်ပေးမည်ဖြစ်သည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

auto-fill နှင့်အတူ minmax လုပ်ဆောင်ချက်ကို သတ်မှတ်ခြင်းသည် အလွန်အဆင်ပြေပါသည်။ အဘယ်ကြောင့်ဆိုသော် ၎င်းသည် အတန်းများ၏ အနံကို အနည်းဆုံးတန်ဖိုးမှ အများဆုံးတန်ဖိုးအထိ အတိုင်းအတာတစ်ခု သတ်မှတ်ပေးသောကြောင့်ဖြစ်သည်။ ကွန်တိန်နာ၏ အနံသည် အတန်းအားလုံးကို မဆန့်နိုင်ပါက အချို့အတန်းများသည် လိုင်းအသစ်တစ်ခုသို့ ရွေ့သွားမည်ဖြစ်ပြီး ထိုလိုင်းရှိ အတန်းများသည် ၎င်းတို့အတွင်း ညီမျှစွာ ဖြန့်ကျက်သွားမည်ဖြစ်သည်။ ယခင်ဥပမာကို ပြောင်းလဲကာ ၎င်းတွင် minmax လုပ်ဆောင်ချက်ကို သတ်မှတ်ကြည့်ပါမည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ယခု auto-fit ဂုဏ်သတ္တိကို သတ်မှတ်ကြည့်ပါမည်။ ၎င်း၏ auto-fill နှင့် ကွာခြားချက်မှာ ၎င်းသည် အတန်းအရေအတွက်ကို ရရှိနိုင်သော ကွန်တိန်နာ၏ အနံနှင့် ကိုက်ညီအောင် ချဲ့ထွင်ခြင်း သို့မဟုတ် ကျုံ့ခြင်းဖြင့် ညှိပေးခြင်းပင် ဖြစ်သည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

fr နှင့်အတူ % ဖြင့် သတ်မှတ်ထားသော တန်ဖိုးများကိုလည်း အသုံးပြုနိုင်ပြီး ၎င်းတို့သည်လည်း အတန်းတစ်ခုက ကွန်တိန်နာ၏ မည်သည့်အပိုင်းကို ယူမည်ကို သတ်မှတ်ပေးသည်။ ဤသို့ပြုလုပ်စဉ်တွင် ပထမဦးစွာ % ဖြင့် အတန်း၏ အရွယ်အစားကို တွက်ချက်ပြီး ကျန်ရှိသော လွတ်လပ်သည့်နေရာကို အပိုင်းများအဖြစ် ခွဲဝေပေးမည်ဖြစ်သည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

grid-template-columns နှင့် grid-template-rows ဂုဏ်သတ္တိများကို အတူတကွ အသုံးပြုကြည့်ပါမည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

grid-template-columns နှင့် grid-template-rows ဂုဏ်သတ္တိများကို အသုံးပြု၍ အတန်းသုံးခုတွင် တည်ရှိသော ဆဲလ်ကိုးခုပါသည့် ဇယားတစ်ခုကို ဖန်တီးကြည့်ပါမည်။ ဒုတိယနှင့် တတိယအတန်းများသည် တူညီသောအနံ ရှိပြီး ကော်လံတစ်ခုစီသည် ကွဲပြားသောအနံ ရှိအောင် လုပ်ကြည့်ပါမည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ယခုတွင် ယခင်ဥပမာရှိ ဇယားအတွင်း အပေါ်ဆုံးအတန်း၏ အနံကို အပိုင်းနှစ်ပိုင်းဖြင့်လည်းကောင်း၊ ပထမကော်လံ၏ အနံကို အပိုင်းတစ်ဝက်ဖြင့်လည်းကောင်း ပြုလုပ်ကြည့်ပါမည်။

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-columns: 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဆက်လက်ဖတ်ရှုရန်