ডেভেলপার হিসেবে আমাদের যা করতে হয় সেটা হচ্ছে একটি নতুন প্রজেক্ট দেওয়া হলে কীভাবে সমস্যাটাকে অপ্রোচ (approach) করব সেটা বুঝতে। রেসপন্সিভ ওয়েবসাইটের সাথে কাজ করার সময়, আমরা প্রায়শই সিএসএস গ্রিড (CSS Grid) এবং সিএসএস ফ্লেক্সবক্স (CSS Flexbox) এর মধ্যে বেছে নিই আমাদের ওয়েবসাইট লেআউট করার জন্য। এই আর্টিকেলে গ্রিড এবং ফ্লেক্সবক্সের মধ্যে পার্থক্য বোঝাতে চেষ্টা করা হয়েছে, এবং কখন কোনটি বেছে নেওয়া উচিত সেটাও।
ফ্লেক্সবক্স (Flexbox) – সংক্ষিপ্ত ওভারভিউ
সিএসএস ফ্লেক্সবক্স মূলত একটি রেসপন্সিভ বক্স মডেল। এটি কন্টেইনারের ভিতরে बेटার পজিশনিং (positioning) অনুমতি দেয় এবং তদনুরূপভাবে ইমপ্লিমেন্ট করা সহজ যতক্ষণ না আপনি এর ক্ষমতা সম্পর্কে আওয়্যার (aware) থাকেন।
ফ্লেক্সিবল বক্স মডেল এখনও বক্স মডেলের সকল প্রপার্টি ব্যবহার করে মার্জিন (margin), প্যাডিং (padding), বর্ডার (border), এবং কন্টেন্ট (content) কন্ট্রোল করার জন্য। যখন আমরা প্যারেন্ট কন্টেইনারে display: flex সেট করি, তবে সেটা সেই প্যারেন্টের চাইল্ডরা (children) জন্য সকল ফ্লেক্স প্রপার্টি খুলে দেয়।
ফ্লেক্সবক্স প্রপার্টির নির্বাচন:
- flex-direction: column | row* | column-reverse | row-reverse
- flex-wrap: wrap | nowrap* | wrap-reverse
- flex-flow: প্রথম দুটি প্রপার্টির শর্টকাট – এটি ফরম্যাট ফলো করে
flex-flow: <flex-direction> <flex-wrap>; - justify-content: মেইন অ্যাক্স (main axis) অনুযায়ী আইটেমগুলো স্পেস করে। যখন flex-direction row সেট করা থাকে, মেইন অ্যাক্স হয় হরিজন্টাল অ্যাক্স। যখন column সেট করা থাকে, মেইন অ্যাক্স হয় ভার্টিক্যাল অ্যাক্স।
- justify-content: flex-start* | flex-end | center | space-evenly | space-around | space-between
- align-items: মেইন অ্যাক্সের বিপরীত অ্যাক্স অনুযায়ী আইটেমগুলো স্পেস করে। যখন flex-direction column সেট করা থাকে, সেটা হবে ভার্টিক্যাল অ্যাক্স। যখন row সেট করা থাকে, সেটা হবে হরিজন্টাল অ্যাক্স।
- align-items: stretch* | center | flex-start | flex-end | baseline
- align-self: এটি তাদের ওপর ব্যবহার করা যাবে যাদের প্যারেন্টদের display প্রপার্টি 'flex' ডিক্লেয়ার করা আছে। এটি ফ্লেক্স কন্টেইনারে অ্যালাইনমেন্ট কন্ট্রোল করে।
- align-self: auto* | stretch | center | flex-start | flex-end | baseline
* – প্রপার্টির ডিফল্ট সেটিং
সিএসএস গ্রিড (CSS Grid) – সংক্ষিপ্ত ওভারভিউ
সিএসএস গ্রিড আরেকটি লেআউট মডেল যা ব্যবহার করা যায়। এটি সিএসএস ফ্লেক্সবক্স মডেলের চেয়ে কিছুটা নতুন, তাই ব্রাউজার সাপোর্ট (browser support) সিএসএস গ্রিডের জন্য ফ্লেক্সবক্সের পরিমাণে ব্যাপক নয়। আমাদের-cols এবং রো (rows) দিয়ে একটি ২D লেআউট তৈরি করার ক্ষমতা রয়েছে সটিক পজিশনিং (meticulously placed positioning) সহ। যখন আমরা প্যারেন্ট এলিমেন্টে display: grid সেট করি, তবে এটি আমাদের জন্য সাধারণ গ্রিড প্রপার্টিগুলো ব্যবহার করার অনুমতি দেয়।
সিএসএস গ্রিড প্রপার্টির নির্বাচন
- grid-gap, grid-column-gap, grid-row-gap: এটি মূলত স্পেসিং (spacing) সেট করার জন্য ব্যবহার হয়। Grid gap হলো কলাম এবং রো গ্যাপ কন্ট্রোল করার শর্টকাট।
- grid-template-columns, grid-template-rows: এটি আপনার গ্রিডের কন্টেইনারগুলোর বেসিক ফরম্যাটিং এর অনুমতি দেয় – কলামগুলো কত প্রস্থ, রোগুলো কত উচ্চতা, প্রতিটি রোতে কতগুলো কন্টেইনার থাকবে, ইত্যাদি।
- justify-content: পুরো গ্রিডকে হরিজন্টালি অ্যালাইন করে।
- align-content: পুরো গ্রিডকে ভার্টিক্যালি অ্যালাইন করে।
- grid-column, grid-row: আমাদের ডিক্লেয়ার করতে দেয় আমরা কত প্রস্থ বা কত উচ্চতা চাই আমাদের গ্রিড আইটেমগুলো।
কোনটি বেছে নেব?
সিএসএস ফ্লেক্সবক্সের প্রপার্টিগুলো এক-আयামী (one-dimensional) লেআউটের জন্য ডিজাইন অনুমতি দেয়: আপনি আপনার লেআউটকে বা রো (rows) বা কলাম (columns) দিয়ে তৈরি করতে পারেন। এটি সে ওয়েব পেজের জন্য খুব ভালো যা কন্টেন্ট প্লেসমেন্টের (content placement) চেয়ে রেসপন্সিভ ডিজাইনে ফ্লেক্সিবিলিটি (flexibility) তে ফোকাস করে।
বিপরীতে, সিএসএস গ্রিড আপনাকে দ্বি-আয়ামী (two-dimensional) স্পেসে লেআউট তৈরি করতে দেয়: রো এবং কলাম দুটোই। এমন প্রপার্টি রয়েছে যা গ্রিডের প্রতিটি কন্টেইনারের লেআউট, প্রস্থ এবং উচ্চতা কন্ট্রোল করে। তাই আপনি olyan গ্রিড পেতে পারেন যা এই ব্লগের টপে পোস্ট করা স্টেইনড গ্লাস উইন্ডো (stained glass window) এর খুব সাদৃশ্য হবে।
যদি আপনি কন্টেন্ট প্লেসমেন্ট (content placement) তে ফোকাসড থাকেন এবং আপনার চাইল্ড কন্টেইনারগুলোকে স্পেসে কন্ট্রোল করতে চান, তবে গ্রিড আপনার জন্য লেআউট ফরম্যাট। ফ্লেক্সবক্স প্লেসমেন্টের চেয়ে কন্টেন্টের ফ্লো (flow of content) এর ওপর বেশি ফোকাস করে।
গ্রিডের জন্য ব্রাউজার সাপোর্ট ফ্লেক্সবক্সের মতো ব্যাপক নয় – শুধু কারণ মনে হয় ফ্লেক্সবক্স গ্রিডের চেয়ে কিছুটা পুরানো। প্রজেক্টে কোন লেআউট মডেল ব্যবহার করবেন সেটা বেছে নেওয়ার সময় এটা একটি বিবেচ্য বিষয় হতে পারে।
উপসংহার
আপনি যেকোনো লেআউট মডেল বেছে নেন, সে উভয়ই সমস্যা সমাধানের জন্য বৈধ অপশন। এটি শুধু প্রজেক্টের উদ্দেশ্য (purpose) কী সেটা নির্ধারণ করে যে আপনি সিএসএস ফ্লেক্স লেআউট বেছে নেবেন নাকি সিএসএস গ্রিড লেআউট।
