Grid-template-columns ပိုင်ဆိုင်မှု

grid-template-columns ပိုင်ဆိုင်မှုသည် grid သို့မဟုတ် ကွက်လပ်တစ်ခုရှိ အရာဝတ္ထုတစ်ခုယူမည့် ကော်လံအရေအတွက်နှင့် အကျယ်ကို သတ်မှတ်ပေးသည်။ ပိုင်ဆိုင်မှုကို မိဘအရာဝတ္ထုတွင် ဖော်ပြပြီး သားသမီးအရာဝတ္ထုများ၏ ကော်လံအကျယ်များကို သတ်မှတ်ပေးသည်။ ပိုင်ဆိုင်မှု၏ တန်ဖိုးတွင် ကျွန်ုပ်တို့သည် ကော်လံအကျယ်များကို မည်သည့် အရွယ်အစားအတွက် ယူနစ်များဖြင့်မဆို ဖော်ပြနိုင်သည်။

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

ဝါကျဖွဲ့ပုံ

cssselector {
  grid-template-columns: column-width;
}

နမူနာ

ကျွန်ုပ်တို့၏ grid ရှိ အရာဝတ္ထုများအတွက် ကော်လံအကျယ်များကို သတ်မှတ်ကြပါစို့:

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

css#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 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-columns: 100px auto 150px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

နမူနာ

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

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

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#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-columns: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

နမူနာ

grid-template-columns ပိုင်ဆိုင်မှုတွင် repeat() လုပ်ဆောင်ချက်ကို ဖော်ပြကြပါစို့။ ၎င်းသည် ကွန်တိန်နာကို ကော်လံသုံးခုလုံး တူညီသောအကျယ်ရှိရမည်ဟု အသိပေးမည်ဖြစ်သည်:

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

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  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>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
  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>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#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-columns: repeat(auto-fill, 200px);
  border: 2px solid #696989;
  padding: 10px;
}
#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-columns: repeat(auto-fill, minmax(150px, 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-columns: repeat(auto-fit, minmax(150px, 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-columns: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 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;
}

Результат:

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