CSS গ্রিডে auto-এর মান

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

আসুন প্রথম এবং তৃতীয় কলামে পিক্সেলে একটি নির্দিষ্ট প্রস্থ নির্দিষ্ট করি, এবং দ্বিতীয় কলামটি স্বয়ংক্রিয়ভাবে অবশিষ্ট স্থান নিক:

<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: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

চাইল্ড এলিমেন্টগুলোকে দুইটি কলামে সাজান: প্রথমটির প্রস্থ 200px, এবং দ্বিতীয়টি যেন অবশিষ্ট স্থান নেয়।

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