CSS ග්‍රිඩ් එකක අන්තර්ගතය අක්ෂ දෙකම දිගේ සබැඳිය

ග්‍රිඩ් එකක, තිරස් සහ සිරස් අක්ෂ දෙකම දිගේ එකවර අන්තර්ගතය සබැඳිය යුතු අවස්ථා බහුලය. මෙම අරමුණ සඳහා, ඔබ පෙර පාඩමේදී අධ්‍යයනය කළ ගුණාංග දෙක එකට භාවිතා කළ හැකිය: justify-content සහ align-content.

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

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

css#parent {
  display: grid;
  justify-content: flex-end;
  align-content: flex-start;
  grid-template-columns: 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-content: flex-start;
  align-content: flex-end;
  grid-template-columns: 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-content: flex-end;
  align-content: center;
  grid-template-columns: 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;
}

Результат:

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