এই সপ্তম উদাহরণের জন্য, স্বয়ংক্রিয়ভাবে-স্থাপিত এবং নমনীয় শিশুদের সাথে একটি প্রতিক্রিয়াশীল বিন্যাস তৈরি করতে আপনি ইতিমধ্যেই শিখেছেন এমন কিছু ধারণাকে একত্রিত করুন। বেশ ঝরঝরে. এখানে মনে রাখার মূল পদগুলি হল repeat , auto-(fit|fill) , এবং minmax() , যা আপনি সংক্ষিপ্ত RAM দ্বারা মনে রাখবেন।
সব একসাথে, এটা মত দেখায়:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
আপনি আবার repeat() ব্যবহার করছেন, কিন্তু এইবার, একটি স্পষ্ট সংখ্যাসূচক মানের পরিবর্তে auto-fit কীওয়ার্ড ব্যবহার করছেন। এটি এই শিশু উপাদানগুলির স্বয়ংক্রিয় অবস্থান সক্ষম করে৷ এই শিশুদের বেস ন্যূনতম মান 150px যার সর্বোচ্চ মান 1fr , যার অর্থ ছোট পর্দায়, তারা সম্পূর্ণ 1fr প্রস্থ গ্রহণ করবে এবং প্রতিটি 150px প্রস্থে পৌঁছানোর সাথে সাথে তারা একই লাইনে প্রবাহিত হতে শুরু করবে।
auto-fit সাথে, যেকোন সম্পূর্ণ খালি ট্র্যাকগুলি 0 -এ ভেঙে পড়বে এবং ভরাট ট্র্যাকগুলি তাদের স্থান দখল করতে বাড়বে৷ যাইহোক, যদি আপনি এটিকে auto-fill পরিবর্তন করেন, তাহলে খালি ট্র্যাকগুলি একই পরিমাণ স্থান গ্রহণ করবে যদি তারা পূরণ করা হয়:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
এইচটিএমএল
<div class="parent white">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
সিএসএস
.parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}