Back

10. CSS Grid

📘 কনসেপ্ট (থিওরি)

CSS Grid হলো দ্বি-মাত্রিক লেআউট সিস্টেম — এটি সারি এবং কলাম উভয়ই একসাথে সামলায়। **কন্টেইনার প্রপার্টি:** - display: grid - grid-template-columns — কলামের আকার নির্ধারণ - grid-template-rows — সারির আকার নির্ধারণ - gap — গ্রিড আইটেমের মধ্যে ফাঁকা - grid-template-areas — স্থাপনের জন্য এরিয়ার নাম **উপকারী একক:** - fr — উপলব্ধ জায়গার ভগ্নাংশ - repeat(3, 1fr) — ৩টি সমান কলাম - minmax(200px, 1fr) — রেসপন্সিভ সাইজিং - auto-fit / auto-fill — স্বয়ংক্রিয় কলাম তৈরি **আইটেম প্রপার্টি:** - grid-column: 1 / 3 — কলাম জুড়ে বিস্তৃত - grid-row: 1 / 3 — সারি জুড়ে বিস্তৃত - grid-area — নামকৃত এরিয়ায় স্থাপন

💡 উদাহরণ

একটি রেসপন্সিভ গ্রিড লেআউট:

🎯 আপনার কাজ (প্র্যাকটিস)

CSS Grid ব্যবহার করে ৬টি আইটেম দিয়ে ৩-কলাম গ্রিড তৈরি করুন। ছোট স্ক্রিনে আইটেম স্বয়ংক্রিয়ভাবে র‍্যাপ হবে।
main.css
Loading...
OUTPUT
Run your code to see the output here...