CSS Grid များတွင် ကော်လံများနှင့် အတန်းများအကြား အကွာအဝေး

gap ဂုဏ်သတ္တိကို အသုံးပြု၍ grid ၏ ကော်လံများနှင့် အတန်းများအကြား အကွာအဝေးကို တစ်ပြိုင်နက် သတ်မှတ်နိုင်ပါသည်။

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

နမူနာ

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

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;
  gap: 10px;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  padding: 10px;
  border: 2px solid #696989;
  width: 600px;
  height: 200px;
}
#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;
  gap: 20px 10px;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  padding: 10px;
  border: 2px solid #696989;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

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