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...