CSS Grid ဖန်တီးကိရိယာ

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

ကော်လံများ (Columns)3အတန်းများ (Rows)3ကော်လံကြား အကွာအဝေး (Column gap)12pxအတန်းကြား အကွာအဝေး (Row gap)12px

အိုင်တမ်တစ်ခု နေရာချရန် grid ပေါ်တွင် ဆွဲယူပါ။

သင့် grid ကို သင့်ဘရောက်ဆာထဲတွင် တိုက်ရိုက်တည်ဆောက်ခြင်းဖြစ်သည်။ သင်သတ်မှတ်သမျှကို BroBroGo သို့ တင်ပို့မည်မဟုတ်ပါ။

အမေးအဖြေ

Grid ပေါ်တွင် အိုင်တမ်များကို မည်သို့ နေရာချရမည်နည်း။

စတုဂံပုံစံ သတ်မှတ်ရန် ဆဲလ်များပေါ်တွင် ဖိပြီး ဆွဲယူပါ — လက်လွှတ်လိုက်သောအခါ ၎င်းသည် ထို columns နှင့် rows များတွင် နေရာယူထားသော child တစ်ခု ဖြစ်လာပါမည်။ သင်ဆွဲလိုက်သော အိုင်တမ်တစ်ခုစီသည် CSS တွင် ကိုယ်ပိုင် grid-column နှင့် grid-row စည်းမျဉ်းကို ရရှိမည်ဖြစ်ပြီး HTML တွင် ကိုက်ညီသော div တစ်ခု ရရှိမည်ဖြစ်သည်။ အိုင်တမ်များသည် ထပ်နေနိုင်ပြီး နောက်မှဆွဲသော အိုင်တမ်သည် အပေါ်မှ ရှိနေမည်ဖြစ်သည်၊ ဖယ်ရှားရန် အိုင်တမ်ပေါ်ရှိ × ကို အသုံးပြုပါ။

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

ဟုတ်ကဲ့။ track တစ်ခုစီတွင် ကိုယ်ပိုင်အရွယ်အစားသတ်မှတ်သည့် အကွက်ရှိပြီး ၎င်းတွင် မည်သည့် grid တန်ဖိုးကိုမဆို ရိုက်ထည့်နိုင်သည် — 1fr, 200px, auto, min-content သို့မဟုတ် minmax(120px, 1fr) စသည်ဖြင့် ဖြစ်သည်။ အရွယ်အစားတူညီသော track များကို repeat() အဖြစ် ပေါင်းစည်းပေးသောကြောင့် ကုဒ်အထွက်ကို တိုတိုတုတ်တုတ် ဖြစ်စေသည်။ Column gap နှင့် row gap တို့ကို သီးခြားစီ သတ်မှတ်နိုင်ပြီး တူညီပါက gap တစ်ခုတည်းအဖြစ် ပေါင်းစည်းသွားပါမည်။

ထုတ်ပေးလိုက်သော ကုဒ်များကို မည်သို့အသုံးပြုရမည်နည်း။

CSS နှင့် HTML တို့ကို ယှဉ်တွဲ၍ ကူးယူပါ။ HTML သည် သင့်အား အိုင်တမ်တစ်ခုစီအတွက် div တစ်ခုစီပါဝင်သော container ကို ပေးမည်ဖြစ်ပြီး CSS သည် grid ကို သတ်မှတ်ပေးပြီး အိုင်တမ်တစ်ခုစီကို နေရာချပေးမည်ဖြစ်သည်။ နှစ်ခုလုံးကို သင့်ပရောဂျက်ထဲသို့ ထည့်သွင်းပါက သင်ဤနေရာတွင် ဆွဲထားသည့်အတိုင်း layout ကို ရရှိမည်ဖြစ်သည်။

BroBroGo အယ်ဒီတာအဖွဲ့မှ ရေးသားပြီး ပြန်လည်စစ်ဆေးထားသည်။နောက်ဆုံးအပ်ဒိတ်လုပ်ချိန်: 2026-08-01

CSS Grid ဖန်တီးကိရိယာ အသုံးပြုနည်း

ဤ "CSS Grid ဖန်တီးကိရိယာ" သည် ကော်လံများနှင့် အတန်းများ အရေအတွက်ကို သတ်မှတ်ခြင်း၊ ၎င်းတို့၏ အရွယ်အစားများကို သတ်မှတ်ခြင်းနှင့် ၎င်းတို့ကြားရှိ အကွာအဝေးများကို သတ်မှတ်ခြင်းဖြင့် CSS grid layout တစ်ခုကို အမြင်အာရုံဖြင့် ပုံစံထုတ်နိုင်စေသော ကိရိယာတစ်ခု ဖြစ်သည်။ Layout အတွင်း အိုင်တမ်များ နေရာချရန်အတွက် grid ကွက်များပေါ်တွင် ဖိပြီး ဆွဲယူနိုင်သည်။ ဤကိရိယာသည် သင်ပုံစံထုတ်လိုက်သော grid အတွက် ကိုက်ညီသည့် CSS နှင့် HTML ကုဒ်များကို အလိုအလျောက် ထုတ်ပေးမည်ဖြစ်ပြီး ၎င်းတို့ကို သင့်ပရောဂျက်ထဲသို့ ကူးယူထည့်သွင်းနိုင်သည်။

ထည့်သွင်းရမည့် တန်ဖိုးများ (Inputs)

ဤကိရိယာတွင် အောက်ပါ တန်ဖိုးများကို ထည့်သွင်းသတ်မှတ်နိုင်သည် -

ကော်လံများ (Columns): ၁ မှ ၁၂ အထိ အရေအတွက်။
အတန်းများ (Rows): ၁ မှ ၁၂ အထိ အရေအတွက်။
ကော်လံကြား အကွာအဝေး (Column gap): 0 မှ 48px အထိ တန်ဖိုး။
အတန်းကြား အကွာအဝေး (Row gap): 0 မှ 48px အထိ တန်ဖိုး။
Column အရွယ်အစားများ: 1fr၊ 200px၊ auto၊ min-content သို့မဟုတ် minmax(120px, 1fr) ကဲ့သို့သော မည်သည့် တရားဝင် CSS grid တန်ဖိုးမဆို ထည့်သွင်းနိုင်သည်။
Row အရွယ်အစားများ: 1fr၊ 200px၊ auto၊ min-content သို့မဟုတ် minmax(120px, 1fr) ကဲ့သို့သော မည်သည့် တရားဝင် CSS grid တန်ဖိုးမဆို ထည့်သွင်းနိုင်သည်။
အိုင်တမ် နေရာချခြင်း: စတုဂံပုံစံ ဧရိယာတစ်ခု သတ်မှတ်ရန် ဆဲလ်များပေါ်တွင် ဖိ၍ ဆွဲယူခြင်း။

ထွက်ပေါ်လာမည့် ရလဒ်များ (Outputs)

ပုံစံထုတ်ပြီးပါက အောက်ပါရလဒ်များကို ရရှိမည်ဖြစ်သည် -

CSS: Grid container နှင့် နေရာချထားသော အိုင်တမ်တစ်ခုစီအတွက် ထုတ်ပေးလိုက်သော CSS ကုဒ်များ။
HTML: Grid container နှင့် နေရာချထားသော အိုင်တမ်တစ်ခုစီအတွက် div အစိတ်အပိုင်းများ ပါဝင်သော HTML ကုဒ်များ။

လုပ်ဆောင်ချက် စည်းမျဉ်းများနှင့် ထူးခြားချက်များ

ဆဲလ်များပေါ်တွင် ဖိဆွဲပြီး မောက်စ်ကို လွှတ်လိုက်သောအခါ ရွေးချယ်ထားသော ကော်လံများနှင့် အတန်းများတွင် နေရာယူမည့် child အိုင်တမ်တစ်ခုကို ဖန်တီးပေးသည်။
ဆွဲလိုက်သော အိုင်တမ်တစ်ခုစီသည် CSS တွင် ကိုယ်ပိုင် grid-column နှင့် grid-row စည်းမျဉ်းကို ရရှိပြီး HTML တွင် ကိုက်ညီသော div တစ်ခု ရရှိမည်ဖြစ်သည်။
အိုင်တမ်များသည် တစ်ခုနှင့်တစ်ခု ထပ်နေနိုင်ပြီး နောက်မှဆွဲသော အိုင်တမ်သည် အပေါ်မှ ရှိနေမည်ဖြစ်သည်။ အိုင်တမ်ပေါ်ရှိ "×" ကို နှိပ်ခြင်းဖြင့် ၎င်းကို ဖယ်ရှားနိုင်သည်။
Track (ကော်လံ သို့မဟုတ် အတန်း) တစ်ခုစီတွင် ကိုယ်ပိုင်အရွယ်အစားသတ်မှတ်သည့် အကွက်ရှိပြီး မည်သည့် grid တန်ဖိုးမဆို ရိုက်ထည့်နိုင်သည်။
အရွယ်အစားတူညီသော track များကို ထွက်လာမည့် CSS တွင် repeat() အဖြစ် ပေါင်းစည်းပေးသည်။
ကော်လံကြား အကွာအဝေးနှင့် အတန်းကြား အကွာအဝေးကို သီးခြားစီ သတ်မှတ်နိုင်သော်လည်း တန်ဖိုးတူညီပါက CSS တွင် gap property တစ်ခုတည်းအဖြစ် ပေါင်းစည်းသွားမည်ဖြစ်သည်။
ဤကိရိယာသည် အိုင်တမ် အများဆုံး ၁၆ ခုအထိသာ လက်ခံသည်။
အကယ်၍ track အရွယ်အစားအတွက် not-a-grid-track ကဲ့သို့သော မမှန်ကန်သည့် တန်ဖိုးကို ရိုက်ထည့်ပါက ၎င်းအကွက်ကို မမှန်ကန်ကြောင်း ပြသမည်ဖြစ်သော်လည်း ထွက်လာမည့် CSS တွင် နောက်ဆုံးမှန်ကန်ခဲ့သည့် တန်ဖိုးကိုသာ ဆက်လက်ထိန်းသိမ်းထားမည်ဖြစ်သည်။
"အိုင်တမ်များ အားလုံးဖျက်ရန်" ကို နှိပ်ပါက HTML container သည် ဗလာဖြစ်သွားပြီး အိုင်တမ်အရေအတွက် ၀ ဖြစ်သွားမည်ဖြစ်သည်။
"အိုင်တမ်အသစ်ထည့်ရန်" ကို နှိပ်ပါက HTML အိုင်တမ်တစ်ခု ထုတ်ပေးမည်ဖြစ်သည်။
ဤကိရိယာတွင် "ဘေးဘား (Sidebar)"၊ "ခေါင်းစီးနှင့် အောက်ခြေစီး (Header & footer)"၊ "ဓာတ်ပုံပြခန်း (Gallery)" နှင့် "ဒက်ရှ်ဘုတ် (Dashboard)" ဟူ၍ အဆင်သင့်ပုံစံများ ပံ့ပိုးပေးထားသည်။ "ဓာတ်ပုံပြခန်း (Gallery)" ပုံစံသည် ကော်လံ ၃ ခု၊ အတန်း ၂ ခုနှင့် အိုင်တမ် ၃ ခုကို ထုတ်ပေးသည်။

ကိုယ်ရေးအချက်အလက် လုံခြုံမှုနှင့် လုပ်ဆောင်ပုံ

သင့် grid ကို သင့်ဘရောက်ဆာထဲတွင် တိုက်ရိုက်တည်ဆောက်ခြင်းဖြစ်သည်။ သင်သတ်မှတ်သမျှ မည်သည့်အချက်အလက်ကိုမျှ အွန်လိုင်းပေါ်သို့ တင်ပို့မည်မဟုတ်ပါ။