Materialize CSS এর একটি শক্তিশালী বৈশিষ্ট্য হলো এর responsive grid system, যা ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের কনটেন্ট বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শন করতে সহায়ক। Materialize CSS এর গ্রিড সিস্টেমটি 12-column grid এর উপর ভিত্তি করে কাজ করে, এবং এটি mobile-first পদ্ধতিতে ডিজাইন করা হয়। এর মানে হল, প্রথমে মোবাইল ডিভাইসের জন্য ডিজাইন করা হয় এবং তারপর স্ক্রীনের আকারের উপর ভিত্তি করে কনটেন্ট অ্যাডজাস্ট করা হয়।
Materialize Grid System এর কাঠামো
Materialize CSS এর গ্রিড সিস্টেমে ১২টি কলাম থাকে, এবং এই কলামগুলির মাধ্যমে আপনি আপনার কনটেন্টের লেআউট তৈরি করতে পারেন। এছাড়া Materialize CSS row এবং column (col) এর মাধ্যমে গ্রিড তৈরি করে।
- Row: একটি রো হলো কনটেন্টের একটি অনুভূমিক সারি, যা কলামগুলোকে ধারণ করে।
- Column (col): কলাম হলো ওয়েবপেজের একটি ভেরটিক্যাল ইউনিট, যেটি row এর মধ্যে অবস্থান করে।
Responsive Grid তৈরি করার ধাপ
- Basic Structure: Materialize CSS এর গ্রিড সিস্টেমে একটি row এর মধ্যে আপনি এক বা একাধিক column রাখতে পারেন। প্রত্যেকটি column নির্দিষ্ট সাইজে পূর্ণ থাকে এবং স্ক্রীনের সাইজ পরিবর্তন হলে কলামগুলো স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট হয়ে যায়।
- Column Sizing: Materialize CSS কলামগুলির জন্য xs (extra small), sm (small), md (medium), lg (large), এবং xl (extra large) সাইজের ক্লাস প্রদান করে। এগুলোর মাধ্যমে আপনি নির্ধারণ করতে পারেন কোন কলাম কবে এবং কীভাবে স্ক্রীনের সাইজ অনুযায়ী প্রদর্শিত হবে।
Responsive Grid Example
এখানে একটি সহজ উদাহরণ দেয়া হলো, যেখানে আমরা Materialize CSS এর grid system ব্যবহার করে একটি responsive layout তৈরি করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Row for creating grid layout -->
<div class="container">
<div class="row">
<!-- First Column: takes 12 columns on small screens, 6 columns on medium screens -->
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<span class="card-title">Column 1</span>
<p>This is the first column content.</p>
</div>
</div>
</div>
<!-- Second Column: takes 12 columns on small screens, 6 columns on medium screens -->
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<span class="card-title">Column 2</span>
<p>This is the second column content.</p>
</div>
</div>
</div>
<!-- Third Column: takes 12 columns on small screens, 4 columns on medium screens -->
<div class="col s12 m4">
<div class="card">
<div class="card-content">
<span class="card-title">Column 3</span>
<p>This is the third column content.</p>
</div>
</div>
</div>
<!-- Fourth Column: takes 12 columns on small screens, 4 columns on medium screens -->
<div class="col s12 m4">
<div class="card">
<div class="card-content">
<span class="card-title">Column 4</span>
<p>This is the fourth column content.</p>
</div>
</div>
</div>
<!-- Fifth Column: takes 12 columns on small screens, 4 columns on medium screens -->
<div class="col s12 m4">
<div class="card">
<div class="card-content">
<span class="card-title">Column 5</span>
<p>This is the fifth column content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
কোড ব্যাখ্যা:
<div class="container">: কন্টেন্টটি একটি কনটেইনারে রাখা হয়েছে যাতে এটি ওয়েবপেজের মাঝখানে সঠিকভাবে প্রদর্শিত হয়।<div class="row">: এটি একক রো তৈরি করে, যেখানে কলামগুলো থাকবে।<div class="col s12 m6">: এখানেcolক্লাসের মাধ্যমে কলামের সাইজ নির্ধারণ করা হয়েছে।s12(extra small screen) এর মানে হলো ছোট স্ক্রীনে এই কলামটি ১২টি কলাম নেবে, আরm6(medium screen) এর মানে হলো মধ্যম স্ক্রীনে এটি ৬টি কলাম নেবে।card: এটি Materialize এর একটি প্রস্তুত উপাদান, যা কনটেন্ট সুন্দরভাবে প্রদর্শন করতে ব্যবহৃত হয়।
Responsive Layout এর সুবিধা
- Mobile-first Design: Materialize এর গ্রিড সিস্টেম মোবাইল ডিভাইসের জন্য প্রথমে ডিজাইন করা হয়, তারপর বড় স্ক্রীনে এটি স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট হয়ে যায়।
- Flexible Layout: আপনি বিভিন্ন সাইজের কলাম ব্যবহার করে লেআউট কাস্টমাইজ করতে পারেন, যা বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে উপস্থাপিত হয়।
- Ease of Use: Materialize এর গ্রিড সিস্টেম খুবই সহজ এবং সোজা, যা আপনাকে দ্রুত এবং কার্যকরী ওয়েবসাইট তৈরি করতে সাহায্য করে।
এভাবে, Materialize CSS এর responsive grid সিস্টেম ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে উপস্থাপন করতে পারেন।
Content added By
Read more
