Grid Layout Repeat () Function

Repeat ( ) ফাংশন দিয়ে কলাম তৈরী।

প্রথমত কিভাবে Repeat ( ) ফাংশন দিয়ে গ্রিড তৈরী করা যায় উদাহরণঃ

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 25%); /*এখানে ৪টি কলামের তৈরী হবে এবং প্রতিটির জন্য ২৫% করে জায়গা নিবে।*/
}

Fraction fr-value এর ব্যবহার।

fr এর ব্যবহারের মাধ্যমে কলাম তৈরী করা যায়। উদাঃ

.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /*এখানে ৬টি কলাম হবে এবং প্রথম কলামটি ২টি কলামের জায়গা নিবে তাই তাকে 2fr নির্দেশ করা হয়েছে*/
}

ফলাফলঃ

Repeat ( ) ফাংশনে auto-fill , minmax () এর ব্যবহার।

গ্রিড লেআউট রিসপনসিভ করতে এই ফাংশনের ব্যবহার করতে হয়। উদাঃ

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

নোটঃ এখানে auto-fill বলতে প্রতিটি কলাম auto fill হবে এবং minmax (200px, 1fr) এখানে 200px হলো কলাম গুলো 200px এর নিচে সংকুচিত হবে না। 1fr হল প্রতিটি div বা grid items কে বোঝানো হয়েছে, যা একএকটির জন্য 200px করে জায়গা নিবে।

ফলাফলঃ