fr ယူနစ်

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

ဥပမာ

grid-template-columns property ကိုအသုံးပြု၍ grid ၏ ပထမနှင့် ဒုတိယ ကော်လံများသည် ကွန်တိန်နာ၏ တစ်ပိုင်းကို ယူစေပြီး တတိယ ကော်လံသည် သုံးပိုင်းကို ယူစေကြပါစို့:

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

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

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

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

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

Результат:

ဤအကြောင်းကိုလည်း ကြည့်ပါ