Framework7-এ Grid Layouts এবং Responsive Design তৈরির জন্য উন্নত Flexbox Grid System ব্যবহার করা হয়। এটি ডেভেলপারদের সহজে রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব ডিজাইন তৈরি করতে সাহায্য করে।
Grid Layouts কি?
Grid Layout একটি পৃষ্ঠা বা কনটেন্টকে রো (row) এবং কলাম (column) আকারে ভাগ করার একটি পদ্ধতি। Framework7 এর Grid System সম্পূর্ণভাবে Flexbox ভিত্তিক এবং এটি মোবাইল-প্রথম ডিজাইন নিশ্চিত করে।
Grid Layout এর প্রধান বৈশিষ্ট্য:
- রেসপন্সিভ ডিজাইন: বিভিন্ন স্ক্রিন সাইজে কনটেন্ট সঠিকভাবে প্রদর্শন।
- Flexbox ভিত্তিক: এটি স্বয়ংক্রিয়ভাবে কনটেন্টের আকার ও অবস্থান পরিচালনা করে।
- সহজ স্ট্রাকচার: HTML ক্লাস ব্যবহার করে দ্রুত গ্রিড তৈরি করা যায়।
- রো এবং কলাম সিস্টেম: কনটেন্টকে পরিষ্কার এবং গঠনমূলকভাবে সাজানো।
Grid Layouts ব্যবহার
Framework7 এর Grid Layout HTML ক্লাস row এবং col এর মাধ্যমে কাজ করে। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো:
উদাহরণ:
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
ব্যাখ্যা:
row: একটি রো তৈরি করে যা কলামগুলো ধারণ করবে।col: প্রতিটি কলাম নির্ধারণ করে।
Responsive Grid Layouts
Framework7 এর Grid System স্বয়ংক্রিয়ভাবে বিভিন্ন ডিভাইসের স্ক্রিন সাইজ অনুযায়ী কাজ করে। তবে আপনি চাইলে নির্দিষ্ট স্ক্রিন সাইজ অনুযায়ী কনটেন্টের আকার বা কলামের সংখ্যা নির্ধারণ করতে পারেন।
রেসপন্সিভ ক্লাস:
Framework7 এ নিম্নলিখিত রেসপন্সিভ ক্লাস রয়েছে:
| ক্লাস | স্ক্রিন সাইজ |
|---|---|
col | সমস্ত স্ক্রিন সাইজের জন্য। |
col-auto | কনটেন্টের আকার অনুযায়ী। |
col-50 | স্ক্রিনের ৫০% প্রস্থের জন্য। |
col-33 | স্ক্রিনের ৩৩% প্রস্থের জন্য। |
col-25 | স্ক্রিনের ২৫% প্রস্থের জন্য। |
col-md-* | Medium স্ক্রিনের জন্য (768px+)। |
col-lg-* | Large স্ক্রিনের জন্য (1024px+)। |
উদাহরণ:
<div class="row">
<div class="col-50">50% Width</div>
<div class="col-50">50% Width</div>
</div>
<div class="row">
<div class="col-md-33">33% Width on Medium Screens</div>
<div class="col-md-67">67% Width on Medium Screens</div>
</div>
গ্রিডে কনটেন্ট কেন্দ্রিক করা
Flexbox Grid System ব্যবহার করে কনটেন্টকে সহজেই কেন্দ্রিক করা যায়।
উদাহরণ:
<div class="row justify-content-center">
<div class="col-50">Centered Column</div>
</div>
ব্যাখ্যা:
justify-content-center: কলামগুলো রো এর কেন্দ্রে স্থাপন করে।
কলামের গ্যাপ নির্ধারণ
কলাম এবং রো এর মধ্যে গ্যাপ নির্ধারণ করা যায় gap ক্লাস ব্যবহার করে।
উদাহরণ:
<div class="row gap">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
Nested Grids
Nested Grid ব্যবহার করে একটি কলামের ভিতরে আরেকটি রো এবং কলাম তৈরি করা যায়।
উদাহরণ:
<div class="row">
<div class="col">
Parent Column
<div class="row">
<div class="col">Nested Column 1</div>
<div class="col">Nested Column 2</div>
</div>
</div>
</div>
Responsive Design তৈরি
Framework7 এর Grid Layout Responsive Design তৈরিতে অত্যন্ত কার্যকর। রেসপন্সিভ ডিজাইন নিশ্চিত করতে স্ক্রিনের আকার অনুযায়ী বিভিন্ন ক্লাস ব্যবহার করুন।
উদাহরণ:
<div class="row">
<div class="col-100 col-md-50 col-lg-25">Responsive Column</div>
<div class="col-100 col-md-50 col-lg-25">Responsive Column</div>
<div class="col-100 col-md-50 col-lg-25">Responsive Column</div>
<div class="col-100 col-md-50 col-lg-25">Responsive Column</div>
</div>
ব্যাখ্যা:
col-100: সমস্ত স্ক্রিন সাইজে ১০০% প্রস্থ।col-md-50: Medium স্ক্রিনে ৫০% প্রস্থ।col-lg-25: Large স্ক্রিনে ২৫% প্রস্থ।
Grid Layout এবং Responsive Design এর সুবিধা
- Flexibility: সহজেই পরিবর্তনশীল ডিজাইন তৈরি করা যায়।
- Device Compatibility: ছোট থেকে বড় স্ক্রিন পর্যন্ত কনটেন্ট ঠিকমতো দেখানো যায়।
- Nested Layouts: জটিল লেআউট তৈরি করা সহজ।
- Efficiency: Flexbox এর উপর ভিত্তি করে দ্রুত লেআউট তৈরি করা যায়।
Framework7 এর Grid Layout এবং Responsive Design ফিচার দিয়ে আপনি একটি সম্পূর্ণ ব্যবহারবান্ধব এবং রেসপন্সিভ অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
