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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

පේළි තුනක පිහිටා ඇති අංග පහකින් සමන්විත ග්‍රිඩ් එකක් සාදන්න. කොටු තුළ ඇති අංග තිරස් අක්ෂයේ ආරම්භයට සහ සිරස් අක්ෂයේ මධ්‍යයට අපිරිසැලසුම සිදු කරන්න.

දැන් ග්‍රිඩ් අංග පේළි දෙකක පිහිටුවා, කොටු තුළ ඇති අංග තිරස් අක්ෂයේ මධ්‍යයට සහ සිරස් අක්ෂයේ ආරම්භයට අපිරිසැලසුම නියම කරන්න.

කොටු තුළ ඇති අංග තිරස් අක්ෂයේ අවසානයට සහ සිරස් අක්ෂයේ මධ්‍යයට අපිරිසැලසෙන පරිදි පෙර කාර්යය වෙනස් කරන්න.