🔖 গ্রিড লেআউট (CSS Grid)

Flexbox যদি একমুখী (শুধু সারি বা কলাম) হয়, তবে CSS Grid হলো টু-ডাইমেনশনাল (একসাথে সারি এবং কলাম দুটোই)! ওয়েবসাইটের পুরো পেজ বা জটিল ড্যাশবোর্ড লেআউট তৈরি করার জন্য Grid-এর কোনো বিকল্প নেই। ⚡

📌 গ্রিডের বেসিক

Grid কাজ করে ছক বা ম্যাট্রিক্সের মতো।

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* ৩টি কলাম */
  grid-template-rows: 100px 100px;          /* ২টি সারি */
  gap: 20px;                                /* আইটেমগুলোর মাঝখানে ফাঁকা */
}

📌 🥷 নিঞ্জা টেকনিক: ফ্র্যাকশন (fr) ইউনিট

গ্রিডে পিক্সেল বা পার্সেন্টেজ ব্যবহার না করে fr (Fraction) ইউনিট ব্যবহার করা সবচেয়ে স্মার্ট কাজ। 1fr মানে হলো “উপলব্ধ জায়গার এক ভাগ”।

.container {
  display: grid;
  /* ৩টি কলাম: সবগুলো সমান জায়গা নেবে */
  grid-template-columns: 1fr 1fr 1fr; 
}
 
.layout {
  display: grid;
  /* ২ কলাম: প্রথমটি ১ ভাগ, দ্বিতীয়টি দ্বিগুণ (২ ভাগ) জায়গা নেবে */
  grid-template-columns: 1fr 2fr; 
}

📌 গ্রিড রিপিট (Repeat) ফাংশন

একই সাইজ বারবার না লিখে repeat() ব্যবহার করা যায়।

.container {
  display: grid;
  /* ৩টি কলাম, প্রতিটির সাইজ 1fr */
  grid-template-columns: repeat(3, 1fr); 
}

📌 🥷 আল্টিমেট নিঞ্জা গ্রিড: রেসপন্সিভ গ্রিড (বিনা মিডিয়া কোয়েরিতে!)

CSS Grid এর সবচেয়ে শক্তিশালী জাদুকরী কোড হলো auto-fit এবং minmax। এটি দিয়ে মিডিয়া কোয়েরি (Media Query) ছাড়াই পুরোপুরি রেসপন্সিভ কার্ড লেআউট বানানো যায়! 🤯

.cards-container {
  display: grid;
  gap: 1.5rem;
  /* যাদুটি এখানে! ✨ */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

📌 Flexbox নাকি Grid? কোনটি কখন ব্যবহার করব?