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

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

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

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

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

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

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

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

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

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

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

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

අංග හයකින් සමන්විත ග්‍රිඩ් එකක් නිර්මාණය කර ඒවා තීරු දෙකකට සකසන්න. අංග ග්‍රිඩ් එකේ තිරස් අක්ෂයේ ආරම්භයට සහ සිරස් අක්ෂයේ මධ්‍යයට සබැඳිය යුතුය.

දැන් ග්‍රිඩ් අංග තීරු තුනකට සකස් කර, අංග ග්‍රිඩ් එකේ තිරස් අක්ෂයේ මධ්‍යයට සහ සිරස් අක්ෂයේ අවසානයට සබැඳිය යුතුය.

පෙර කාර්යය වෙනස් කරන්න, එවිට අංග සබැඳීම ග්‍රිඩ් එකේ තිරස් අක්ෂයේ අවසානයට සහ සිරස් අක්ෂයේ මධ්‍යයට සිදුවේ.