CSS গ্রিডে auto-fit-এর মান
এখন আসুন auto-fit মানটি বিবেচনা করি,
যা repeat ফাংশনের সাথে একসাথে প্রয়োগ করা হয়
সমান আকারের কলাম নির্দিষ্ট করতে।
এর auto-fill মান থেকে পার্থক্য হলো
যে auto-fit কন্টেইনারের প্রাপ্ত প্রস্থের under
কলামের সংখ্যা সামঞ্জস্য করে, সেগুলোকে প্রসারিত বা
সংকুচিত করে।
উদাহরণ
আসুন আটটি এলিমেন্ট সহ একটি কন্টেইনারের উদাহরণে auto-fit মানের কাজ দেখি।
auto-fit মানের সাথে প্রয়োগ করি
আপনার পরিচিত minmax ফাংশনটি
যা আগের পাঠে শিখেছেন:
<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: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
উদাহরণ
এবার গ্রিড কন্টেইনারের প্রস্থ
400px-এ কমিয়ে দিন:
<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: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ব্যবহারিক কাজ
ধরুন আপনার নয়টি এলিমেন্টের একটি টেবিল আছে।
auto-fit মান ব্যবহার করে তাদের জন্য
কলামের প্রস্থ এবং গ্রিড কন্টেইনারের প্রস্থ এমনভাবে সেট করুন
যাতে সব চাইল্ড এলিমেন্ট তিনটি সারিতে অবস্থান করে।
এখন আগের কাজটি পরিবর্তন করুন এমনভাবে, যাতে সব এলিমেন্ট দুইটি সারিতে অবস্থান করে।
