place-self ගුණය

place-self ගුණය ග්‍රිඩ් එකක තනි මූලද්‍රව්‍යයක සංගත කිරීම සිරස් සහ තිරස් අක්ෂ දෙකටම වහාම සකසයි. ගුණයේ අගයෙහි පළමුව සඳහන් කරනු ලබන්නේ සිරස් සංගත කිරීම වන අතර දෙවැන්න තිරස් අක්ෂයට සංගත කිරීම වේ. මෙම ගුණය අපට සංගත කිරීමට අවශ්‍ය මූලද්‍රව්‍යය තුළ සකසනු ලැබේ.

වාක්‍ය රචනය

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;
}

Результат:

මේවාත් බලන්න