CSS ග්‍රිඩ් එකක තනි අංගයක් දෙඅක්ෂයෙන්ම යෙදීම

justify-self සහ align-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);
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  justify-self: start;
  align-self: center;
}

Результат:

තිරස් මධ්‍යයට සහ සිරස් ආරම්භයට

දැන් අපි පළමු අංගය තිරස් අක්ෂයේ මධ්‍යයට සහ සිරස් අක්ෂයේ ආරම්භයට යෙදීම සකසමු:

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);
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  justify-self: center;
  align-self: 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);
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  justify-self: end;
  align-self: center;
}

Результат:

ප්‍රායෝගික කාර්යයන්