CSS Grid বনাম Flexbox
আপনার CSS লেআউটের সাথে লড়াই করা বন্ধ করুন।
আমি Flexbox দিয়ে ভেঙে যাওয়া লেআউট ঠিক করতে ঘণ্টার পর ঘণ্টা ব্যয় করতাম। আমি আইটেমগুলোকে একটি সারিতে (row) সাজানোর চেষ্টা করতাম, কিন্তু শেষ আইটেমটি পুরো স্ক্রিন জুড়ে ছড়িয়ে পড়ত। দেখতে খুব খারাপ লাগত। আমি মার্জিন এবং নানা রকম হ্যাক ব্যবহার করে দেখেছিলাম, কিন্তু কোনোটিই কাজ করেনি।
তারপর আমি CSS Grid ব্যবহারের মানসিকতা তৈরি করলাম।
পার্থক্যটি খুব সহজ:
- Flexbox হলো ওয়ান-ডাইমেনশনাল (one-dimensional) লেআউটের জন্য। এটি একটি মাত্র সারি (row) বা একটি মাত্র কলামের (column) জন্য ব্যবহার করুন।
- CSS Grid হলো টু-ডাইমেনশনাল (two-dimensional) লেআউটের জন্য। যখন আপনার একই সাথে সারি এবং কলাম উভয়ই নিয়ন্ত্রণ করার প্রয়োজন হয়, তখন এটি ব্যবহার করুন।
Flexbox-কে ছোট কাজের টুল হিসেবে ভাবুন। আর Grid-কে আপনার পুরো পেজ স্ট্রাকচারের টুল হিসেবে ভাবুন।
The Flexbox Trap: যখন আপনি একটি গ্যালারির জন্য Flexbox ব্যবহার করেন, তখন প্রতিটি স্ক্রিন সাইজে আইটেমগুলো নিখুঁতভাবে সারিবদ্ধ নাও হতে পারে। প্রায়ই আপনি কিছু "অনাথ" (orphan) আইটেম দেখতে পাবেন যা আপনার ডিজাইনের ছন্দ নষ্ট করে দেয়।
The Grid Solution: Grid ব্যবহার করে আপনি মাত্র এক লাইনের কোডেই রেসপনসিভ গ্যালারি তৈরি করতে পারেন।
এটি ব্যবহার করুন:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
এটি ব্রাউজারকে নির্দেশ দেয় যেন সম্ভবপর সর্বোচ্চ সংখ্যক ২৫০ পিক্সেলের কলাম ফিট করা হয়। ব্রাউজার আপনার হয়ে সব হিসাব করে নেবে। আর কোনো অনুমান করার প্রয়োজন নেই, আর কোনো ভেঙে যাওয়া সারিও থাকবে না।
The Dashboard Example: একটি সাইডবার, মেইন কন্টেন্ট এবং ফুটারসহ ড্যাশবোর্ড তৈরি করা Flexbox দিয়ে কঠিন। ফুটারকে পুরো প্রস্থ জুড়ে দেখানোর জন্য প্রায়ই আপনাকে নেস্টেড কন্টেইনার এবং অগোছালো কোড ব্যবহার করতে হয়।
Grid দিয়ে আপনি একবারেই ট্র্যাকগুলো ডিফাইন করতে পারেন:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
মাত্র একটি কমান্ড ব্যবহার করে আপনি ফুটারকে প্রথম কলাম থেকে শেষ কলাম পর্যন্ত বিস্তৃত করতে পারেন। এতে আপনার কোড পরিষ্কার এবং সহজে পড়ার যোগ্য হয়ে ওঠে।
My advice:
• হেডার বা বাটনের সাধারণ অ্যালাইনমেন্টের জন্য Flexbox ব্যবহার করুন। • মূল পেজ লেআউট এবং জটিল গ্যালারির জন্য Grid ব্যবহার করুন। • শুধুমাত্র একটি লেআউট সমস্যা সমাধানের জন্য কন্টেইনার নেস্টিং করা বন্ধ করুন। • স্পেস সহজে ভাগ করার জন্য fr ইউনিট ব্যবহার করুন।
আজই এটি চেষ্টা করে দেখুন। Flexbox দিয়ে তৈরি করা আপনার কোনো পুরনো কম্পোনেন্ট নিন। সেটি CSS Grid ব্যবহার করে পুনরায় লিখুন। আপনি দেখতে পাবেন আপনার কোড ছোট হয়ে আসছে এবং লেআউট আরও শক্তিশালী হচ্ছে।