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