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

এখন ডিবাগারে আমাদের গ্রিডটি দেখি:

ব্যবহারিক কাজ

পাঁচটি উপাদান নিয়ে একটি গ্রিড তৈরি করুন, যেগুলো তিনটি সারিতে অবস্থিত। সেলগুলিতে উপাদানগুলির এলাইনমেন্ট অনুভূমিক অক্ষের শুরু এবং উল্লম্ব অক্ষের কেন্দ্র বরাবর সম্পন্ন করুন।

এবার গ্রিডের উপাদানগুলিকে দুটি সারিতে স্থাপন করুন এবং সেলগুলির ভিতরে উপাদানগুলির এলাইনমেন্ট অনুভূমিক অক্ষের কেন্দ্র এবং উল্লম্ব অক্ষের শুরু বরাবর নির্ধারণ করুন।

পূর্ববর্তী কাজটি পরিবর্তন করুন, যাতে উপাদানগুলির এলাইনমেন্ট অনুভূমিক অক্ষের শেষ এবং উল্লম্ব অক্ষের কেন্দ্র বরাবর ঘটে।