place-items ගුණය

place-items ගුණය එකවර තීරු සහ පේළි සම්පාතනය කරයි, එය අප භාවිතා කරන කේතය සැලකිය යුතු ලෙස අඩු කරයි. පළමු අගයෙන් අපි සිරස් අක්ෂය දිගේ, දෙවන අගයෙන් තිරස් අක්ෂය දිගේ අංගයේ පිහිටුම සකසමු. place-items ගුණය මව් අංගය තුළ සකසා ඇත. place-items සමඟ වැඩ කිරීම පහසුවෙන් බ්‍රව්සර් දෝෂ සුදුසුකරණය (debugger) හරහා නැරඹිය හැකිය.

වාක්‍ය රචනා ශිල්පය (Syntax)

තේරීම (selector) {
	place-items: තිරස් අක්ෂය දිගේ සම්පාතන අගය සිරස් අක්ෂය දිගේ සම්පාතන අගය;
}

උදාහරණය . සිරස් අක්ෂයේ කේන්ද්‍රයට සහ තිරස් අක්ෂයේ ආරම්භයට සම්පාතනය කිරීම

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

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

අපගේ ග්‍රිඩ් එක බ්‍රව්සර් දෝෂ සුදුසුකරණය (debugger) හරහා බලමු:

උදාහරණය . සිරස් අක්ෂයේ අවසානයට සහ තිරස් අක්ෂයේ කේන්ද්‍රයට සම්පාතනය කිරීම

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

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

දැන් දෝෂ සුදුසුකරණ පැනලයට (debugger panel) බලමු:

උදාහරණය . සිරස් අක්ෂයේ ආරම්භයට සහ තිරස් අක්ෂයේ අවසානයට සම්පාතනය කිරීම

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

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

බ්‍රව්සර් දෝෂ සුදුසුකරණය (debugger) භාවිතයෙන් සෛල තුළ අංග සම්පාතනය බලමු:

මෙයද බලන්න

justify-items ගුණය,
ග්‍රිඩ් සෛල තුළ අංග තිරස් අක්ෂය දිගේ සම්පාතනය කිරීම සකසයි
align-items ගුණය,
හරස් අක්ෂය (cross axis) දිගේ සම්පාතනය කිරීම සකසයි