Materialize CSS এর grid system একটি শক্তিশালী টুল, যা ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের কনটেন্টকে বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে উপস্থাপন করতে সহায়ক। এটি responsive design তৈরিতে ব্যবহৃত হয়, যেখানে breakpoints এবং offsets ব্যবহার করে কনটেন্টকে সাজানো যায়। এখানে breakpoints এবং offset এর ব্যবহার নিয়ে বিস্তারিত আলোচনা করা হবে।
Grid System কি?
Materialize CSS এর grid system ১২-কোলামের (12-column) ভিত্তিতে কাজ করে। এটি rows এবং columns এর মাধ্যমে কনটেন্টের সঠিক বিন্যাস তৈরি করতে সাহায্য করে। Columns বিভিন্ন সাইজের হতে পারে এবং rows এর মধ্যে অবস্থান করতে পারে।
এটি খুব সহজেই responsive ওয়েবসাইট তৈরিতে সহায়তা করে, যাতে ওয়েবসাইটটি মোবাইল, ট্যাবলেট, ডেস্কটপ সহ বিভিন্ন ডিভাইসে সুন্দরভাবে উপস্থাপিত হয়।
Breakpoints কি?
Breakpoints হলো নির্দিষ্ট ডিভাইস বা স্ক্রীন সাইজের জন্য ডিজাইন পরিবর্তন করার জন্য নির্ধারিত সীমা। Materialize CSS এ ৪টি প্রধান breakpoints রয়েছে:
- xs (extra small): ০px - ৪৭৯px (মোবাইল)
- sm (small): ৪৮০px - ৭৬৭px (ট্যাবলেট)
- md (medium): ৭৬৮px - ৯৫১px (ডেস্কটপ)
- lg (large): ৯৫২px এবং তার বেশি (বড় ডেস্কটপ)
আপনি এই breakpoints ব্যবহার করে নির্দিষ্ট ডিভাইস সাইজে আপনার কনটেন্টের প্রস্থ এবং বিন্যাস (layout) পরিবর্তন করতে পারেন।
Breakpoints এর ব্যবহার
Materialize CSS এ grid system ব্যবহার করতে হলে, আপনি বিভিন্ন breakpoints ব্যবহার করতে পারেন যাতে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন বিভিন্ন স্ক্রীন সাইজে ঠিকভাবে দেখায়। নিচে কিছু উদাহরণ দেওয়া হলো:
<div class="row">
<div class="col s12 m6 l4">
<p>This column takes 12 columns on small screens, 6 on medium screens, and 4 on large screens.</p>
</div>
<div class="col s12 m6 l4">
<p>This column takes 12 columns on small screens, 6 on medium screens, and 4 on large screens.</p>
</div>
<div class="col s12 m6 l4">
<p>This column takes 12 columns on small screens, 6 on medium screens, and 4 on large screens.</p>
</div>
</div>
- s12: মোবাইল ডিভাইসে পুরো ১২ কলাম নিবে (যতটুকু স্পেস থাকবে)
- m6: ট্যাবলেট ডিভাইসে ৬ কলাম নিবে
- l4: বড় স্ক্রীনে ৪ কলাম নিবে
এভাবে আপনি আপনার কনটেন্টের সাইজ বিভিন্ন স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করতে পারেন।
Offset কি?
Offset হলো একটি কলামের জন্য স্থান সরানোর (shift) উপায়। এটি কলামগুলোর মধ্যে স্পেস তৈরি করতে এবং কনটেন্ট সঠিকভাবে সাজাতে সহায়ক। Offset এর মাধ্যমে আপনি কলামের অবস্থান পরিবর্তন করতে পারেন।
Offset এর ব্যবহার
আপনি যদি চান একটি কলাম নির্দিষ্ট পরিমাণ জায়গা শিফট করুক, তাহলে আপনি offset ক্লাস ব্যবহার করতে পারেন। col offset-X এই ফরম্যাটে X হলো আপনি কতটা স্থান শিফট করতে চান, যেখানে X হবে ১ থেকে ১১ এর মধ্যে কোন সংখ্যার মান। নিচে একটি উদাহরণ দেওয়া হলো:
<div class="row">
<div class="col s12 m6 offset-m3">
<p>This column will be centered on medium screens, with a 3-column offset.</p>
</div>
</div>
এখানে, offset-m3 ব্যবহার করা হয়েছে, যা ট্যাবলেট স্ক্রীনে কলামটিকে ৩টি কলাম সরে রেখে সেন্টার অবস্থানে এনে দেবে।
Breakpoints এবং Offset এর সমন্বয়
আপনি breakpoints এবং offsets একত্রে ব্যবহার করে আরো উন্নত ওয়েব ডিজাইন করতে পারেন। উদাহরণস্বরূপ, যদি আপনি চান যে কোনো কলাম মোবাইলে পুরো প্রস্থ নেবে, তবে বড় স্ক্রীনে সেটি শিফট হয়ে মাঝখানে অবস্থান করবে, তাহলে আপনি এমনভাবে offset এবং breakpoints ব্যবহার করতে পারেন:
<div class="row">
<div class="col s12 m6 offset-m3 l4 offset-l4">
<p>This column takes full width on small screens, 6 columns on medium screens with an offset of 3, and 4 columns on large screens with an offset of 4.</p>
</div>
</div>
এখানে:
- s12: মোবাইলে পুরো ১২ কলাম নিবে।
- m6 offset-m3: ট্যাবলেট স্ক্রীনে ৬ কলাম নিবে এবং ৩ কলাম স্থান শিফট করবে।
- l4 offset-l4: বড় স্ক্রীনে ৪ কলাম নিবে এবং ৪ কলাম স্থান শিফট করবে।
উপসংহার
Materialize CSS এর grid system এর মাধ্যমে আপনি সহজেই responsive design তৈরি করতে পারেন। Breakpoints এবং offset এর মাধ্যমে আপনি ওয়েবসাইটের কনটেন্টকে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করতে পারবেন। Breakpoints ওয়েবসাইটের ডিজাইনকে বিভিন্ন ডিভাইসে সুন্দরভাবে উপস্থাপন করতে সাহায্য করে, আর offset ব্যবহার করে আপনি কনটেন্টের অবস্থান এবং সাজানো পদ্ধতিতে পরিবর্তন আনতে পারেন।
