အဓိကအကြောင်းအရာသို့ ကျော်သွားရန်
LibraTool logoLibraTool

အခမဲ့ CSS Grid ဖန်တည်းကိရိယာ

CSS grid အားမြင်သာစွာ ဒီဇိုင်းဆွဲ — ကြေးများ၊ ယူနစ်များနှင့်ကွာဒျောင်းများ — နှင့် ထုတ်ဖန်တည်းသောCSS နှင့် HTML ကိုကူးယူပါ။

Load ပြီးသည်နှင့် offline အလုပ်လုပ်သည်
အစဉ်အလာများ
အတန်းများ (3)
အကျဥ်းများ (2)
Live ကြည့်ရှုမှု
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 အားလုံးသည် browser တွင်လုပ်ဆောင်သည် — အဘယ်အရာမျှအပ်ကြေးလိုက်လျောမည်မဟုတ်။

မည်သို့ အလုပ်လုပ်သည်

CSS grid တစ်ခုကို မြင်ကွင်းအရ design ပြုလုပ်ပါ: column 8 ခုနှင့် row 8 ခုအထိ ထည့်ပါ၊ track တစ်ခုစီကို fr, px, auto or min/max-content သို့ သတ်မှတ်ပါ၊ row/column gap များကို ချိန်ညှိပါ။ နံပါတ်တပ် live preview သည် ချက်ချင်း update ဖြစ်ပြီး ဖန်တီးထားသော grid-template CSS ပေါင်း ကိုက်ညီသော HTML သည် သင့် clipboard မှ တစ်ချက်နှိပ်ရုံသာ။

  1. 1
    Grid ကို ပုံစံချပါ
    + and − ဖြင့် column and row များ ထည့်/ဖယ်ပါ။
  2. 2
    Track များကို သတ်မှတ်ပါ
    Column and row တစ်ခုစီသည် ၎င်းကိုယ်ပိုင် unit (1fr, 100px, auto…) ရသည်။
  3. 3
    Gap များကို ချိန်ညှိပါ
    သီးခြား row-gap and column-gap slider များ။
  4. 4
    Code ကို ကူးယူပါ
    ထုတ်လုပ်မှုအသင့် CSS နှင့် ကိုက်ညီသော HTML ဘောင်။

အားလုံးကို သင့် browser ထဲတွင် လုပ်ဆောင်ပါသည် — ဘာမှ upload မလုပ်ပါ။

ဆက်နွှယ်သော ကိရိယာများ

↔️

CSS Flexbox ဖန်တည်းကိရိယာ

flex direction၊ wrap၊ justify နှင့် align တွင်စမ်းသပ်ပါ live အရာများ — နှင့် CSS ကိုကူးယူပါ။

ကြိုးစားပါ
📐

CSS clamp() ထုတ်လုပ်စက်

responsive typography နှင့် spacing အတွက် fluid CSS clamp() တန်ဖိုး ဖန်တီးပါ။ min/max size နှင့် viewport range သတ်မှတ်ပါ၊ live preview ကြည့်ပြီး one-line CSS copy ပါ。

ကြိုးစားပါ
📓

ပရင့်ထုတ်နိုင်သောစက္ကူ — မျဉ်းကြောင်းပါ၊ ဂရပ်၊ အစက်ကွက်နှင့် ဂီတစက္ကူ (PDF)

သင့်ကိုယ်ပိုင်စက္ကူကို ပရင့်ထုတ်ပါ- မျဉ်းကြောင်းပါ (ကျယ်သော သို့မဟုတ် ကောလိပ်စတိုင်မျဉ်း)၊ ဂရပ်၊ အစက်ကွက်၊ အိုင်ဆိုမက်ထရစ်၊ လက်ရေးလေ့ကျင့်ခြင်း၊ ဂီတမျဉ်းငါးကြောင်း သို့မဟုတ် Cornell မှတ်စုများ၊ A4၊ Letter၊ A5 သို့မဟုတ် Legal တွင်၊ မည်သည့်မျဉ်းအရောင်မဆို၊ လိုသလောက် စာမျက်နှာအရေအတွက်ဖြင့်။ သင့်ဘရောက်ဇာတွင် ဖန်တီးသော ပြတ်သားသည့် vector PDF။

ကြိုးစားပါ

မကြာခဏ မေးလေ့မေးထရှိသော မေးခွန်းများ