স্বরলিপিটির পুনরাবৃত্তি সংখ্যা হিসাবে auto-fillবা auto-fitহিসাবে ব্যবহার করুন repeat()।
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
auto-fillপুনরাবৃত্তি সংখ্যা হিসাবে যখন দেওয়া হয়, গ্রিডের ধারক যদি প্রাসঙ্গিক অক্ষে একটি নির্দিষ্ট আকার বা সর্বাধিক আকার থাকে তবে পুনরাবৃত্তির সংখ্যাটি বৃহত্তম সম্ভাব্য ধনাত্মক পূর্ণসংখ্যা যা গ্রিডটিকে তার গ্রিড ধারককে উপচে ফেলে না দেয়।
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
গ্রিডটি তার ধারকটিকে উপচে না ফেলে যথাসম্ভব অনেকগুলি ট্র্যাকের পুনরাবৃত্তি করবে।
এই ক্ষেত্রে, উপরের উদাহরণটি দেওয়া (চিত্র দেখুন) , মাত্র 5 টি ট্র্যাকগুলি প্রবাহিত না করে গ্রিড-ধারককে ফিট করতে পারে। আমাদের গ্রিডে কেবল 4 টি আইটেম রয়েছে, তাই পঞ্চমটি অবশিষ্ট স্থানের মধ্যে খালি ট্র্যাক হিসাবে তৈরি করা হয়।
অবশিষ্ট স্থান, ট্র্যাক # 6, স্পষ্ট গ্রিড শেষ করে। এর অর্থ অন্য ট্র্যাক রাখার মতো পর্যাপ্ত জায়গা ছিল না।
auto-fit
auto-fitশব্দ হিসাবে একই আচরণ করবে auto-fillছাড়া যে পরে গ্রিড আইটেমটি বসানো অ্যালগরিদম অবশিষ্ট স্থান মধ্যে যে কোনো খালি ট্র্যাক ধসে করা হবে না 0।
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
গ্রিডটি তার ধারকটি উপচে না ফেলে এখনও যতগুলি সম্ভব ট্র্যাক পুনরাবৃত্তি করবে, তবে খালি ট্র্যাকগুলি ধসে পড়বে 0।
একটি ধসে পড়া ট্র্যাকটির একটি নির্দিষ্ট ট্র্যাক সাইজিং ফাংশন হিসাবে গণ্য করা হয় 0px।
auto-fillচিত্রের উদাহরণের বিপরীতে , খালি পঞ্চম ট্র্যাকটি ধসে গেছে এবং চতুর্থ আইটেমের পরে স্পষ্ট গ্রিডের সমাপ্ত হবে।
auto-fill বনাম auto-fit
minmax()ফাংশনটি ব্যবহার করার সময় উভয়ের মধ্যে পার্থক্য লক্ষণীয় ।
ব্যবহার করুন minmax(186px, 1fr)থেকে আইটেমগুলি পরিসীমা 186pxথেকে 186pxপ্লাস গ্রিড কন্টেইনারে অবশেষ স্থান ভগ্নাংশ।
ব্যবহার করার সময় auto-fill, খালি ট্র্যাক রাখার জায়গা না থাকলে আইটেমগুলি বাড়বে।
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
ব্যবহার করার সময় auto-fit, আইটেমগুলি অবশিষ্ট স্থানটি পূরণ করতে বাড়বে কারণ সমস্ত খালি ট্র্যাকগুলি ধসে পড়েছে 0px।
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
খেলার মাঠ:
স্বতঃপূর্ণ ট্র্যাকগুলি পরিদর্শন করা হচ্ছে
স্বয়ংক্রিয় ফিট ট্র্যাকগুলি পরিদর্শন করা হচ্ছে
grid-template-columns: auto auto auto auto;এই ক্ষেত্রে কাজ করে? =)