Foundation ফ্রেমওয়ার্কে Flex Grid সিস্টেম ব্যবহার করে ওয়েব পেজের কনটেন্টকে সহজে সাজানো যায়। Flex Grid সিস্টেমের মাধ্যমে Vertical (অনুভূমিক) এবং Horizontal (লম্বালম্বি) এলাইমেন্টগুলি ফ্লেক্সিবলি সাজানো সম্ভব। এটি Flexbox প্রযুক্তির উপর ভিত্তি করে কাজ করে, যা উপাদানগুলির অ্যালাইনমেন্ট, ডিসট্রিবিউশন এবং স্পেসিংকে সহজ করে তোলে।
এখানে আমরা Vertical এবং Horizontal Flex Grid ব্যবহারের মাধ্যমে লেআউট তৈরি করতে দেখব।
১. Horizontal Flex Grid (অনুভূমিক ফ্লেক্স গ্রিড)
Horizontal Flex Grid সাধারণত এলাইন্ড উপাদানগুলির মধ্যে স্থান কিভাবে ভাগ হবে এবং উপাদানগুলির অবস্থান একে অপরের সাথে কিভাবে সম্পর্কিত হবে তা নিয়ন্ত্রণ করে। এটা মূলত উপাদানগুলিকে এক লাইনে (row) সাজানোর জন্য ব্যবহৃত হয়।
উদাহরণ: Horizontal Flex Grid
<div class="row">
<div class="small-12 medium-4 large-3 columns">
<p>কলাম ১</p>
</div>
<div class="small-12 medium-4 large-3 columns">
<p>কলাম ২</p>
</div>
<div class="small-12 medium-4 large-3 columns">
<p>কলাম ৩</p>
</div>
<div class="small-12 medium-4 large-3 columns">
<p>কলাম ৪</p>
</div>
</div>
এখানে:
- row: একটি অনুভূমিক রো (row), যেখানে সব কলামগুলো একসাথে সাজানো হবে।
- columns: প্রতিটি কলামের জন্য একটি নির্দিষ্ট প্রস্থ নির্ধারণ করা হয়েছে, যা স্ক্রীন সাইজের উপর নির্ভর করবে।
- small-12, medium-4, large-3: প্রতিটি কলামের প্রস্থ। মোবাইল স্ক্রীনে ১২ কলাম (পূর্ণ প্রস্থ), ট্যাবলেটে ৪ কলাম, এবং ডেস্কটপে ৩ কলাম।
Flexbox-এ Horizontal Alignment
Flexbox এর মাধ্যমে আমরা কলামগুলির মধ্যে স্থান সহজে নিয়ন্ত্রণ করতে পারি। উদাহরণস্বরূপ, justify-content ব্যবহার করে উপাদানগুলির মধ্যে স্পেস তৈরি করা:
.row {
display: flex;
justify-content: space-between; /* কলামগুলির মধ্যে সমান স্থান */
}
এছাড়া, Flexbox দিয়ে কলামগুলিকে center বা start এও অ্যালাইন করা যেতে পারে।
২. Vertical Flex Grid (লম্বালম্বি ফ্লেক্স গ্রিড)
Vertical Flex Grid হল Flexbox এর মাধ্যমে উপাদানগুলিকে উল্লম্বভাবে (column-wise) সাজানোর একটি পদ্ধতি। এতে উপাদানগুলি একে অপরের উপরে বা নিচে রাখা হয়।
উদাহরণ: Vertical Flex Grid
<div class="row">
<div class="small-12 medium-4 large-3 columns">
<p>কলাম ১</p>
</div>
<div class="small-12 medium-4 large-3 columns">
<p>কলাম ২</p>
</div>
<div class="small-12 medium-4 large-3 columns">
<p>কলাম ৩</p>
</div>
</div>
এখানে columns ডিফল্টভাবে flex সিস্টেমে সাজানো হবে। তবে আপনি যদি কলামগুলোকে উল্লম্বভাবে সাজাতে চান, তাহলে flex-direction প্রোপার্টি ব্যবহার করতে হবে।
Flexbox-এ Vertical Alignment
.row {
display: flex;
flex-direction: column; /* উপাদানগুলোকে লম্বালম্বি (vertical) সাজানো */
}
এটি কলামগুলিকে একের পর এক উপরের থেকে নিচে সাজাবে।
৩. Horizontal এবং Vertical Flexbox একত্রিত করা
Foundation Flex Grid সিস্টেমে আপনি horizontal এবং vertical ফ্লেক্স গ্রিডকে একসাথে ব্যবহার করতে পারেন। এর মাধ্যমে আপনি আরও জটিল লেআউট তৈরি করতে পারবেন। উদাহরণস্বরূপ, একটি রো-এ কলামগুলো অনুভূমিকভাবে সাজানো এবং তার মধ্যে নেস্টেড কলামগুলো লম্বালম্বি সাজানো।
উদাহরণ: Horizontal এবং Vertical Flex Grid একত্রিত করা
<div class="row">
<div class="small-12 medium-6 large-4 columns">
<p>প্রধান কলাম</p>
<div class="row" style="flex-direction: column;">
<div class="small-6 columns">
<p>নেস্টেড কলাম ১</p>
</div>
<div class="small-6 columns">
<p>নেস্টেড কলাম ২</p>
</div>
</div>
</div>
<div class="small-12 medium-6 large-4 columns">
<p>সাইড কলাম</p>
</div>
</div>
এখানে:
- প্রধান কলাম একটি অনুভূমিক রো-এ রয়েছে, যেখানে নেস্টেড কলামগুলো লম্বালম্বি ভাবে সাজানো হয়েছে।
৪. Flexbox-এ Space Distribution
Flexbox-এর আরেকটি শক্তিশালী ফিচার হল space distribution, যেখানে উপাদানগুলির মধ্যে স্থান evenly (সমানভাবে) বা proportionally (অনুপাতিকভাবে) ভাগ করা যায়।
উদাহরণ: Space Between
.row {
display: flex;
justify-content: space-between; /* কলামগুলির মধ্যে সমান জায়গা */
}
উদাহরণ: Space Around
.row {
display: flex;
justify-content: space-around; /* কলামগুলির মধ্যে সমান জায়গা থাকবে */
}
উদাহরণ: Space Evenly
.row {
display: flex;
justify-content: space-evenly; /* কলামগুলির মধ্যে সমান জায়গা থাকবে */
}
Foundation এর Flex Grid সিস্টেম খুবই ফ্লেক্সিবল এবং কার্যকরী, যা ওয়েব ডেভেলপমেন্টে কলামগুলোকে অনুভূমিক (Horizontal) বা উল্লম্ব (Vertical) ভাবে সাজাতে সাহায্য করে। Flexbox-এর সাহায্যে আপনি একাধিক ব্রেকপয়েন্ট এবং কাস্টমাইজড লেআউট তৈরি করতে পারেন, যা বিভিন্ন স্ক্রীনে সুন্দরভাবে প্রদর্শিত হবে। Flex Grid সিস্টেম আপনাকে আরও জটিল লেআউট সহজে তৈরি করতে এবং দ্রুত কাস্টমাইজ করতে সহায়তা করে।
Read more
