CSS ග්‍රිඩ් කොටු තුළ ද්විත්ව අක්ෂ අපිරිසැලසුම

ග්‍රිඩ් කොටු තුළ ඇති අංග තිරස් සහ සිරස් අක්ෂ දෙකෙහම එකවර අපිරිසැලසුම නියම කළ හැකිය. මෙම අරමුණ සඳහා අපට ප්‍රජනක අංගයේ නියම කරන justify-items සහ align-items ගුණාංග දෙක ඒකාබද්ධ කළ හැකිය.

අක්ෂවල මධ්‍යයට

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

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

css#parent {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  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;
}

Результат:

දැන් අපගේ ග්‍රිඩ් එක නිරීක්ෂකය තුළ බලමු:

තිරස් ආරම්භයට සහ සිරස් අවසානයට

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

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

css#parent {
  display: grid;
  justify-items: start;
  align-items: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  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;
}

Результат:

දැන් අපගේ ග්‍රිඩ් එක නිරීක්ෂකය තුළ බලමු:

තිරස් අවසානයට සහ සිරස් ආරම්භයට

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

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

css#parent {
  display: grid;
  justify-items: end;
  align-items: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  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;
}

Результат:

දැන් අපගේ ග්‍රිඩ් එක නිරීක්ෂකය තුළ බලමු:

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