place-self ဂုဏ်သတ္တိ

place-self ဂုဏ်သတ္တိသည် Grid အတွင်းရှိ တစ်ခုတည်းသော အစိတ်အပိုင်းတစ်ခု၏ အနေအထားကို ဒေါင်လိုက်နှင့် အလျားလိုက်ဝင်ရိုးနှစ်ခုစလုံးအတွက် တစ်ပြိုင်နက် သတ်မှတ်ပေးသည်။ ဂုဏ်သတ္တိ၏ တန်ဖိုးတွင် ပထမအချက်အနေဖြင့် ဒေါင်လိုက်ဝင်ရိုးအတွက် အနေအထားညှိခြင်းကို ဖော်ပြပြီး၊ ဒုတိယအချက်အနေဖြင့် Grid အတွင်းရှိ တစ်ခုတည်းသော အစိတ်အပိုင်း၏ အလျားလိုက်ဝင်ရိုးအတွက် အနေအထားညှိခြင်းကို ဖော်ပြသည်။ ဤဂုဏ်သတ္တိကို ကျွန်ုပ်တို့ အနေအထားညှိလိုသော အစိတ်အပိုင်း၌ပင် သတ်မှတ်ပေးရသည်။

ဝါကျဖွဲ့စည်းပုံ

cssအစိတ်အပိုင်း {
  place-self: ဒေါင်လိုက်အတွက် တန်ဖိုး အလျားလိုက်အတွက် တန်ဖိုး;
}

ဥပမာ . ဒေါင်လိုက်ဝင်ရိုး၏ အလယ်ဗဟိုနှင့် အလျားလိုက်ဝင်ရိုး၏ စတင်ရာအနေအထားသို့ ညှိခြင်း

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  place-self: center start;
}

Результат:

ဥပမာ . ဒေါင်လိုက်ဝင်ရိုး၏ စတင်ရာအနေအထားနှင့် အလျားလိုက်ဝင်ရိုး၏ အဆုံးသတ်အနေအထားသို့ ညှိခြင်း

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  place-self: start end;
}

Результат:

ဥပမာ . ဒေါင်လိုက်ဝင်ရိုး၏ အဆုံးသတ်အနေအထားနှင့် အလျားလိုက်ဝင်ရိုး၏ အလယ်ဗဟိုအနေအထားသို့ ညှိခြင်း

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  place-self: end center;
}

Результат:

ဆက်စပ် ကြည့်ရှုရန်