CSS গ্রিডে minmax ফাংশন
auto-fill-এর সাথে একসাথে
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-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
minmax ফাংশনের কাজ প্রদর্শন করে
একটি উদাহরণ লিখুন।
