Material Design Lite (MDL) ফ্রেমওয়ার্কে লেআউট তৈরি করার জন্য আপনি Columns এবং Rows ব্যবহার করতে পারেন, যেগুলি মূলত Grid System-এর অংশ। MDL-এর গ্রিড সিস্টেম খুবই শক্তিশালী এবং ব্যবহার করা সহজ, যা ওয়েব পেজের বিভিন্ন অংশে কন্টেন্ট সাজানোর জন্য অত্যন্ত কার্যকর। MDL-এর গ্রিড সিস্টেমে ১২টি কলাম থাকে, যার মাধ্যমে বিভিন্ন সাইজের কন্টেন্ট ব্লক সহজে তৈরি করা যায়।
MDL গ্রিড সিস্টেমের কাঠামো
MDL-এর গ্রিড সিস্টেম ১২টি কলামের উপর ভিত্তি করে তৈরি, যা ব্যবহারকারীদের লেআউটের মধ্যে উপাদানগুলো সঠিকভাবে সাজাতে সহায়তা করে। আপনি যদি একটি রেসপন্সিভ লেআউট তৈরি করতে চান, তাহলে কলাম এবং রো ব্যবহার করে সহজেই সেটি করতে পারবেন। MDL এ একটি রো (row) ১২টি কলামের মধ্যে বিভক্ত, যা আপনাকে বিভিন্ন ডিভাইসের জন্য উপযুক্ত লেআউট তৈরি করার সুযোগ দেয়।
গ্রিড সিস্টেমের মূল উপাদান:
- row: রো হলো কন্টেন্টের একটি লাইন বা সারি, যেখানে কলামগুলি অবস্থান করে।
- column: কলাম হলো কন্টেন্টের একটি ভরাট অংশ, যা রোতে অবস্থিত থাকে। MDL-এ কলামের আকার ১ থেকে ১২ পর্যন্ত হতে পারে, যেমন
mdl-cell--4-colইত্যাদি।
Columns এবং Rows ব্যবহার করে লেআউট তৈরি
এখন, MDL-এর গ্রিড সিস্টেম ব্যবহার করে কিভাবে লেআউট তৈরি করা যায়, তা দেখে নেওয়া যাক।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
<title>MDL Grid Layout</title>
</head>
<body>
<!-- Row 1 -->
<div class="mdl-grid">
<!-- Column 1 (4 column width) -->
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title"><h2 class="mdl-card__title-text">Column 1</h2></div>
<div class="mdl-card__supporting-text">
This is the first column with a width of 4 columns.
</div>
</div>
</div>
<!-- Column 2 (4 column width) -->
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title"><h2 class="mdl-card__title-text">Column 2</h2></div>
<div class="mdl-card__supporting-text">
This is the second column with a width of 4 columns.
</div>
</div>
</div>
<!-- Column 3 (4 column width) -->
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title"><h2 class="mdl-card__title-text">Column 3</h2></div>
<div class="mdl-card__supporting-text">
This is the third column with a width of 4 columns.
</div>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="mdl-grid">
<!-- Full-width column (12 column width) -->
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title"><h2 class="mdl-card__title-text">Full-width Column</h2></div>
<div class="mdl-card__supporting-text">
This is a full-width column that spans all 12 columns.
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
এখানে আমরা দুটি row তৈরি করেছি:
- প্রথম রোতে তিনটি column আছে, প্রতিটি ৪টি কলামের সমান (
mdl-cell--4-col). - দ্বিতীয় রোতে একটি full-width column তৈরি করা হয়েছে, যা ১২টি কলাম জুড়ে বিস্তৃত।
কলাম এবং রো ব্যবহারের সুবিধা
১. রেসপন্সিভ ডিজাইন
MDL-এর গ্রিড সিস্টেমের মাধ্যমে আপনি খুব সহজে রেসপন্সিভ ওয়েব পেজ তৈরি করতে পারবেন, যেখানে বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী কন্টেন্ট সঠিকভাবে সাজানো হবে। কলামগুলোকে ডিভাইসের স্ক্রীন সাইজ অনুযায়ী অ্যাডজাস্ট করা যায়।
২. কাস্টমাইজেশন
MDL আপনাকে ফ্লেক্সিবিলিটি প্রদান করে, যাতে আপনি প্রয়োজন অনুসারে কলামের সাইজ কাস্টমাইজ করতে পারেন। প্রতিটি কলামের মধ্যে আপনি নিজস্ব কন্টেন্ট এবং ডিজাইন প্রয়োগ করতে পারবেন।
৩. সহজ ইন্টিগ্রেশন
MDL-এর গ্রিড সিস্টেম অন্যান্য CSS ফ্রেমওয়ার্কের তুলনায় অনেক সহজ এবং দ্রুত ইন্টিগ্রেট করা যায়, বিশেষত যদি আপনি Material Design স্টাইল ব্যবহার করতে চান।
সারাংশ
MDL-এ Columns এবং Rows ব্যবহার করে আপনি খুব সহজে রেসপন্সিভ এবং আকর্ষণীয় লেআউট তৈরি করতে পারেন। MDL-এর গ্রিড সিস্টেম ১২টি কলাম ব্যবহার করে কন্টেন্টকে সুন্দরভাবে সাজাতে সাহায্য করে এবং এর মাধ্যমে ওয়েবসাইটের ডিজাইনটি রেসপন্সিভ হয়ে ওঠে। কলাম এবং রো ব্যবহার করে কন্টেন্টকে সঠিকভাবে লেআউট করা সম্ভব, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
Read more
