CSS গ্রিডে কলামের সংখ্যা এবং প্রস্থ

গ্রিডে কাজ করার সাথে পরিচিতি আমরা শুরু করব এটি নির্ধারণ করে যে কলামের সংখ্যা এবং প্রস্থ, যার মধ্যে চাইল্ড এলিমেন্টগুলি স্থাপন করা হবে। এই উদ্দেশ্যে আমরা ব্যবহার করব grid-template-columns প্রপার্টি, যা উল্লেখ করা হয় প্যারেন্ট এলিমেন্টে এবং নির্ধারণ করে কলামের সংখ্যা এবং প্রস্থ, যা গ্রিডে চাইল্ড এলিমেন্টগুলি দখল করবে। প্রপার্টির মানে আমরা পিক্সেলে কলামের প্রস্থ উল্লেখ করি।

উদাহরণ

প্রথমে আসুন একটি প্যারেন্ট এলিমেন্ট তৈরি করি এবং এটিকে একটি গ্রিড কন্টেইনার বানাই। ধরুন আমাদের কাছে একটি div আছে, যাতে অবস্থিত চারটি চাইল্ড এলিমেন্ট। এর জন্য display প্রপার্টিতে মান grid সেট করি, এবং grid-template-columns প্রপার্টিতে দুটি কলামের জন্য প্রস্থ লিখি:

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

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

এখন আসুন একটি টেবিল তৈরি করি চারটি ভিন্ন আকারের কলাম সহ:

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

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

ধরুন আপনার কাছে নয়টি চাইল্ড এলিমেন্ট সহ একটি div আছে। প্যারেন্ট এলিমেন্টটিকে একটি গ্রিড কন্টেইনার বানান।

চাইল্ড এলিমেন্টগুলিকে দুটি কলামে স্থাপন করুন যার প্রস্থ 200px।

চাইল্ড এলিমেন্টগুলিকে তিনটি কলামে স্থাপন করুন যার প্রস্থ 150px।

চাইল্ড এলিমেন্টগুলিকে তিনটি কলামে স্থাপন করুন: প্রথমটির প্রস্থ 100px, দ্বিতীয়টি 150px, এবং তৃতীয়টি 200px।