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

গ্রিড এলিমেন্টগুলিও সারি বরাবর স্থাপন করা যেতে পারে। এর জন্য রয়েছে প্রপার্টি grid-template-rows। এই প্রপার্টিটি সারিগুলোর আকার স্পেস দ্বারা আলাদা করে নেয়। আমরা কলামের জন্য যে মানগুলো শিখেছি সেগুলো এখানেও প্রয়োগ করা যেতে পারে।

উদাহরণ

উদাহরণ হিসাবে, আসুন ব্লকগুলোকে চারটি সারিতে স্থাপন করি:

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

#parent {
	display: grid;
	grid-template-rows: 50px 100px 50px 50px;
	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>

#parent {
	display: grid;
	grid-template-rows: 100px auto 60px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

সারির আকার নির্দিষ্ট করতে repeat ফাংশন ব্যবহার করি:

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

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

সারিগুলোর উচ্চতা 50px নির্ধারণ করি, এবং সারির সংখ্যা auto-fill মান ব্যবহার করে স্বয়ংক্রিয়ভাবে নির্ধারণ করা হোক:

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

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, 50px);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

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

আপনার গ্রিডে তিনটি সারি থাকুক। এটি এমনভাবে করুন যেন তাদের প্রস্থ একই হয়।