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

ජාලයේ සිරස් අක්ෂය දිගේ අන්තර්ගතය සැලැස්ම කිරීම සඳහා අපි align-content ගුණාංගය භාවිතා කරමු, එය මව් අංගයේ සකසනු ලැබේ.

අක්ෂයේ ආරම්භයට

අපගේ ජාලයේ අංග සිරස් අක්ෂයේ ආරම්භයට සැලැස්ම කිරීම සකසමු:

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

#parent {
	display: grid;
	align-content: 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>5</div>
</div>

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

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

අපි අංග සිරස් අක්ෂයේ අවසානයට සැලැස්ම කිරීම සකසමු:

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

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

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

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

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

පෙර කාර්යය වෙනස් කරන්න, එවිට අංග සැලැස්ම වන්නේ සිරස් අක්ෂයේ අවසානයට ය.