CSS গ্রিডে সারি একত্রিত করা

গ্রিডে সারি এবং কলাম একটি গ্রিড গঠন করে। এটি এমনভাবে করা যেতে পারে যে একটি উপাদান গ্রিডের একটি কোষ নয়, বরং একাধিক কোষ দখল করে।

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

এই ক্ষেত্রে, উপাদানটি প্রথম অবস্থান থেকে দ্বিতীয় অবস্থান পর্যন্ত (এটি অন্তর্ভুক্ত না করে) প্রসারিত হবে। সুতরাং, 1 / 2 মানটি উপাদানটিকে প্রথম কোষটি দখল করতে বাধ্য করবে, এবং 1 / 3 মানটি উপাদানটিকে প্রথম এবং দ্বিতীয় কোষ দখল করতে বাধ্য করবে (তবে তৃতীয়টি অন্তর্ভুক্ত না করে)।

উদাহরণ

ধরা যাক আমাদের তিনটি চাইল্ড এলিমেন্ট সহ একটি গ্রিড রয়েছে। আসুন সেগুলিকে এমনভাবে স্থাপন করি যাতে প্রথম উপাদানটি দুটি সারি দখল করে:

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3; /* দুইটি সারি */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

উদাহরণ

এখন চতুর্থ ব্লকটিকে তিনটি সারি নির্দিষ্ট করি:

<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: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

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

নিম্নলিখিত উদাহরণ অনুসারে সমস্ত উপাদান স্থাপন করুন এবং সারি একত্রিত করুন: