Materialize CSS এর Grid System একটি অত্যন্ত শক্তিশালী এবং সহজে ব্যবহৃত সিস্টেম, যা ওয়েবসাইটের কনটেন্টের লেআউটকে সঠিকভাবে সাজাতে সাহায্য করে। এর মাধ্যমে বিভিন্ন স্ক্রীন সাইজে ওয়েবসাইটের কনটেন্ট সুন্দরভাবে প্রদর্শিত হয়। 12-column grid এর মাধ্যমে আপনি সহজেই কনটেন্টকে বিভিন্ন আকারে ভাগ করতে পারেন, যা সারা বিশ্বের ওয়েব ডেভেলপারদের কাছে এটি অত্যন্ত জনপ্রিয় একটি ফিচার বানিয়েছে।
১২-কোলাম গ্রিড সিস্টেম
Materialize CSS এর গ্রিড সিস্টেম 12-column grid ভিত্তিক। এর মানে হলো যে ওয়েব পেজের লেআউট মোট ১২টি কলামে বিভক্ত থাকে, এবং আপনি এই ১২টি কলাম ব্যবহার করে আপনার কনটেন্টটি উপযুক্তভাবে সাজাতে পারেন। আপনি যেকোনো কনটেন্টের জন্য এই ১২টি কলামকে ভাগ করে দিতে পারেন যেমন একক কলাম, দুই কলাম, তিন কলাম ইত্যাদি। এটি responsive design নিশ্চিত করে, যাতে ওয়েবসাইট বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শিত হয়।
Grid System এর মৌলিক গঠন
- Container:
Grid সিস্টেমের ভিতরে একটি container থাকবে, যা কনটেন্টের সীমানা নির্ধারণ করবে। এটি মূলত দুই ধরনের হতে পারে:.container: যেটি একটি সীমিত প্রস্থের কনটেইনার তৈরি করে।.container-fluid: যেটি পুরো স্ক্রীন প্রস্থে কনটেন্ট প্রদর্শন করে।
Row:
Row হলো গ্রিডের একেকটি সারি (horizontal row), যেখানে কলামগুলো রাখা হয়।
উদাহরণ:<div class="row"> <!-- Column content goes here --> </div>- Column:
Column হলো সঠিক প্রস্থের উপাদান যা সারির ভিতরে রাখা হয়। আপনি গ্রিডের ১২টি কলাম থেকে যেকোনো সংখ্যক কলাম ব্যবহার করতে পারেন, এবং সেই অনুযায়ী কনটেন্ট ভাগ করতে পারবেন।
কোলাম সাইজ
Materialize CSS ১২টি কলামের সিস্টেম ব্যবহার করে, এবং আপনি প্রতিটি কলামের সাইজকে ফ্লেক্সিবলি কাস্টমাইজ করতে পারবেন। কোলামের আকার ১ থেকে ১২ পর্যন্ত হতে পারে। উদাহরণস্বরূপ:
- 12 কলাম পূর্ণ ব্যবহার: যদি আপনি একটি উপাদান পুরো পৃষ্ঠার প্রস্থের মধ্যে প্রদর্শন করতে চান, তাহলে সেটি ১২টি কলাম নেয়।
- ১ থেকে ৬ কলাম ব্যবহার: আপনি চাইলে একটি উপাদান ৩টি, ৪টি বা ৬টি কলাম নিয়ে ব্যবহার করতে পারেন।
উদাহরণ: ১২-কোলাম গ্রিড সিস্টেমের ব্যবহার
এখানে একটি সাধারণ উদাহরণ দেখানো হচ্ছে, যেখানে ১২টি কলামের মধ্যে কনটেন্ট ভাগ করা হয়েছে:
<div class="container">
<div class="row">
<div class="col s12 m6 l4">Column 1</div>
<div class="col s12 m6 l4">Column 2</div>
<div class="col s12 m6 l4">Column 3</div>
</div>
</div>
এই উদাহরণে:
s12অর্থ হলো small screen (যেমন মোবাইল ডিভাইস) এর জন্য পুরো ১২টি কলাম ব্যবহার করা হবে।m6অর্থ হলো medium screen (যেমন ট্যাবলেট) এর জন্য ৬টি কলাম ব্যবহার হবে।l4অর্থ হলো large screen (যেমন ডেস্কটপ) এর জন্য ৪টি কলাম ব্যবহার হবে।
Grid System এর Responsive ব্যবহার
Materialize CSS এর গ্রিড সিস্টেম mobile-first পদ্ধতি অনুসরণ করে, যার মানে হলো আপনি ছোট স্ক্রীনের জন্য ডিফল্ট কলাম সাইজ দিতে পারেন এবং বড় স্ক্রীনের জন্য বিভিন্ন সাইজ সেট করতে পারেন। উদাহরণস্বরূপ:
<div class="container">
<div class="row">
<div class="col s12 m6 l3">Column 1</div>
<div class="col s12 m6 l3">Column 2</div>
<div class="col s12 m6 l3">Column 3</div>
<div class="col s12 m6 l3">Column 4</div>
</div>
</div>
এখানে:
- ছোট স্ক্রীনে (মোবাইল) প্রতিটি কলাম পুরো ১২টি কলাম নেয় (অর্থাৎ ১টি কলাম সম্পূর্ণ রূপে নেয়),
- মিডিয়াম স্ক্রীনে (ট্যাবলেট) প্রতিটি কলাম ৬টি কলাম নেয়,
- বড় স্ক্রীনে (ডেস্কটপ) প্রতিটি কলাম ৩টি কলাম নেয়।
উপসংহার
Materialize CSS এর ১২-কোলাম গ্রিড সিস্টেম ওয়েব ডিজাইনে খুবই কার্যকরী এবং সহজে ব্যবহারযোগ্য। এর মাধ্যমে আপনি যেকোনো ধরনের ওয়েবসাইটের লেআউট তৈরি করতে পারবেন এবং ওয়েবসাইটটি মোবাইল, ট্যাবলেট, ডেস্কটপ—সব ধরনের ডিভাইসে সুন্দরভাবে প্রদর্শিত হবে। এটি responsive design নিশ্চিত করার মাধ্যমে আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
Read more
