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

আসুন বিভিন্ন ধরনের সারি এবং কলাম স্প্যান নিয়ে আলোচনা করি।

উদাহরণ

আসুন grid-column এবং grid-row বৈশিষ্ট্যগুলি একত্রিত করে একটি টেবিল তৈরি করি:

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

উদাহরণ

এবং এখন প্রথম এবং চতুর্থ ব্লক যেন সম্পূর্ণ সারি দখল করে, দ্বিতীয় ব্লক যেন দুই সারি এবং দুই কলাম দখল করে, এবং তৃতীয় এবং চতুর্থ ব্লক যেন এক সারি এবং দুই কলাম দখল করে তা করি:

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

উদাহরণ

আসুন টেবিলের প্রথম উপাদানটি যেন প্রথম সারির সমস্ত কলাম দখল করে, এবং বাকি উপাদানগুলি দ্বিতীয় সারিতে অবস্থান করে, একই প্রস্থের কলাম দখল করে তা করি:

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

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

উদাহরণ

এখন আমাদের একটি টেবিল থাকবে যা পাঁচটি উপাদান নিয়ে গঠিত। আসুন প্রথম উপাদানটি শীর্ষ সারিতে স্থাপন করি, এবং বাকি সবগুলি - দ্বিতীয় সারিতে:

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

#parent {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 5;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 3 / 4;
}
#elem5 {
	grid-row: 2 / 3;
	grid-column: 4 / 5;
}

ব্যবহারিক সমস্যা

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