CSS ග්‍රිඩ් එකක තනි අංගයක තිරස් අක්ෂය ඔස්සේ සැලැස්ම

තිරස් අක්ෂය ඔස්සේ සැලැස්ම පැවසිය හැක්කේ දෙමාපිය අංගයට පමණක් නොව, එක් එක් උපඅංගය සඳහා වෙන වෙනම. මෙම අරමුණ සඳහා භාවිතා කරන්නේ justify-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;
}

Результат:

තිරස් අක්ෂයේ මධ්‍යයට

පළමු අංගය තිරස් අක්ෂයේ මධ්‍යයට සැලැස්ම සකසමු:

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

Результат:

තිරස් අක්ෂයේ අවසානයට

පළමු අංගය සඳහා තිරස් අක්ෂයේ අවසානයට සැලැස්ම සකසමු:

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

Результат:

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