CSS গ্রিডে একটি পৃথক উপাদানের উল্লম্ব অক্ষ বরাবর সমন্বয়

একইভাবে, align-self বৈশিষ্ট্য ব্যবহার করে উপাদানগুলিকে উল্লম্ব অক্ষ বরাবর সমন্বয় করা যায়। আসুন উদাহরণের মাধ্যমে দেখি কিভাবে এটি কাজ করে।

উল্লম্ব অক্ষের শুরুতে

প্রথম উপাদানটিকে উল্লম্ব অক্ষের শুরুতে সমন্বয় করা যাক:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

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

উল্লম্ব অক্ষের কেন্দ্রে

প্রথম উপাদানটিকে উল্লম্ব অক্ষের কেন্দ্রে সমন্বয় করা যাক:

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

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

উল্লম্ব অক্ষের শেষে

আমাদের গ্রিডের প্রথম উপাদানটিকে উল্লম্ব অক্ষের শেষে সমন্বয় করা যাক:

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

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

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

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

এখন উপাদানগুলিকে তিনটি কলামে সাজান এবং দ্বিতীয় উপাদানটিকে গ্রিডের উল্লম্ব অক্ষের কেন্দ্রে সমন্বয় করুন।

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