CSS Grid တွင် repeat function အသုံးပြုခြင်း

သင့်တွင် တူညီသော အရွယ်အစားများ သတ်မှတ်ပေးရမည့် ကော်လံများ ရှိပါက၊ repeat function ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်နိုင်ပါသည်။ ဤ function ၏ ပထမ parameter တွင် ကော်လံအရေအတွက်ကို ဖော်ပြပြီး၊ ဒုတိယ parameter တွင် ၎င်းတို့၏ အကျယ်ကို ဖော်ပြပါသည်။ ဥပမာများဖြင့် ယင်းအလုပ်လုပ်ပုံကို ကြည့်ရအောင်။

ဥပမာ

ကျွန်ုပ်တို့တွင် အရွယ်အစားတူညီသော ကော်လံ သုံးခု ရှိသည်ဆိုပါစို့။

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

ဥပမာ

ကျွန်ုပ်တို့တွင် အရွယ်အစားတူညီသော ကော်လံ သုံးခု ရှိပြီး၊ စတုတ္ထကော်လံသည် အခြားအရွယ်အစား ဖြစ်သည်ဆိုပါစို့။

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

ဥပမာ

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

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

ဥပမာ

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

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

ဥပမာ

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

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

လက်တွေ့လေ့ကျင့်ခန်းများ