CSS ජාලයක තිරස් අක්ෂය දිගේ අන්තර්ගතය පෙළගැස්වීම

ජාලයක දී අන්තර්ගතය ස්ථානගත කිරීම පමණක් නොව එය ජාලයේ තිරස් අක්ෂය දිගේ පෙළගැස්වීමටද අවශ්‍ය විය හැකිය. මෙම අවස්ථාවේ දී අපි භාවිතා කරන්නේ justify-content ගුණයයි, එය මව් අංගයේ සකසනු ලැබේ. උදාහරණ මගින් මෙම ගුණය ක්‍රියා කරන ආකාරය දෙස බලමු.

අක්ෂයේ ආරම්භයට අනුව

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

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

#parent {
	display: grid;
	justify-content: start;
	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;
}

අක්ෂයේ මධ්‍යයට අනුව

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

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

#parent {
	display: grid;
	justify-content: center;
	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;
}

අක්ෂයේ අවසානයට අනුව

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

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

#parent {
	display: grid;
	justify-content: end;
	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;
}

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

තීරු දෙකකින් සමන්විත වන ජාලයක් සාදන්න. අංග ජාලයේ තිරස් අක්ෂයේ ආරම්භයට අනුව පෙළගස්වන්න.

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

පෙර කාර්යය වෙනස් කරන්න එවිට අංගවල පෙළගැස්වීම තිරස් අක්ෂයේ අවසානයට අනුව සිදුවේ.