Foundation এর Flex Grid এর ভূমিকা

Foundation ফ্রেমওয়ার্কে Flex Grid হল একটি শক্তিশালী এবং অত্যন্ত ফ্লেক্সিবল গ্রিড সিস্টেম, যা ওয়েব ডিজাইনকে আরও সহজ এবং কার্যকর করে তোলে। Flex Grid-এর মাধ্যমে ওয়েব পেজের কনটেন্টকে সহজেই বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সামঞ্জস্যপূর্ণ এবং রেসপনসিভ (Responsive) করা যায়। Foundation-এর Flex Grid সিস্টেম মূলত Flexbox প্রযুক্তি ব্যবহার করে, যা উপাদানগুলির আকার, স্থান এবং অ্যালাইনমেন্ট (alignment) সহজে এবং দ্রুত পরিবর্তন করতে সক্ষম।

Foundation এর Flex Grid এর বৈশিষ্ট্য

১. Flexbox ভিত্তিক

Foundation এর Flex Grid সিস্টেম Flexbox ব্যবহার করে তৈরি, যা লেআউটের উপাদানগুলোকে আরও ডাইনামিক এবং কাস্টমাইজেবল করে তোলে। Flexbox উপাদানগুলির জন্য স্থান, অ্যালাইনমেন্ট, এবং বক্সের আকার দ্রুত পরিবর্তন করতে সাহায্য করে, এবং এটি পুরো লেআউটের জন্য যথাযথ অবস্থান নিশ্চিত করে।

২. রেসপনসিভ গ্রিড সিস্টেম

Flex Grid সিস্টেমে গ্রিড স্বয়ংক্রিয়ভাবে মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনের জন্য প্রস্থ সমন্বয় করে। এটি বিভিন্ন ডিভাইসে কনটেন্টকে সুন্দরভাবে উপস্থাপন করতে সাহায্য করে।

Foundation-এর Flex Grid ১২টি কলামের উপর ভিত্তি করে কাজ করে, এবং আপনি সহজেই এই কলামগুলির প্রস্থ কাস্টমাইজ করতে পারেন।

৩. কাস্টম কলাম প্রস্থ

Foundation-এর Flex Grid সিস্টেমে আপনি বিভিন্ন ব্রেকপয়েন্টের জন্য কলামগুলির প্রস্থ কাস্টমাইজ করতে পারেন, যেমন:

• small-12: মোবাইল ডিভাইসে পূর্ণ প্রস্থ (১২ কলাম)
• medium-6: ট্যাবলেট ডিভাইসে অর্ধেক প্রস্থ (৬ কলাম)
• large-4: ডেস্কটপে এক তৃতীয়াংশ প্রস্থ (৪ কলাম)

এটি Flexbox এর শক্তি এবং Foundation-এর গ্রিড সিস্টেমের ফ্লেক্সিবিলিটি মিলিয়ে একটি অত্যন্ত কার্যকরী ডিজাইন উপস্থাপন করে।

Foundation Flex Grid-এ Row এবং Column ব্যবহারের ভূমিকা

১. Row (রো)

Foundation Flex Grid সিস্টেমে Row একটি অনুভূমিক কনটেইনার যা কলামগুলিকে ধারণ করে। একটি রো-এ একাধিক কলাম থাকতে পারে, এবং এই কলামগুলিকে Flexbox প্রযুক্তি ব্যবহার করে সহজেই আলাইন করা যায়।

<div class="row">
  <div class="small-12 medium-6 large-4 columns">
    <p>কলাম ১</p>
  </div>
  <div class="small-12 medium-6 large-4 columns">
    <p>কলাম ২</p>
  </div>
  <div class="small-12 medium-6 large-4 columns">
    <p>কলাম ৩</p>
  </div>
</div>

২. Column (কলাম)

প্রতিটি Column হল গ্রিডের একক অংশ, যার মাধ্যমে কনটেন্ট সাজানো হয়। Foundation-এর 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>

এখানে:

• small-12: মোবাইল স্ক্রীনে পুরো প্রস্থ (১২ কলাম)
• medium-4: ট্যাবলেট স্ক্রীনে ৪ কলাম (এক চতুর্থাংশ প্রস্থ)
• large-3: ডেস্কটপ স্ক্রীনে ৩ কলাম (এক চতুর্থাংশ প্রস্থ)

৩. নেস্টেড কলাম

Foundation Flex Grid সিস্টেমে আপনি একটি কলামের ভিতরে অন্য কলাম রাখতে পারেন, যা নেস্টিং নামে পরিচিত। এটি জটিল লেআউট তৈরি করতে সহায়ক।

<div class="row">
  <div class="small-12 medium-8 large-6 columns">
    <p>প্রধান কলাম</p>
    <div class="row">
      <div class="small-6 columns">
        <p>নেস্টেড কলাম ১</p>
      </div>
      <div class="small-6 columns">
        <p>নেস্টেড কলাম ২</p>
      </div>
    </div>
  </div>
  <div class="small-12 medium-4 large-6 columns">
    <p>সাইড কলাম</p>
  </div>
</div>

এখানে, প্রধান কলাম এবং তার ভিতরে নেস্টেড কলাম রয়েছে।

Foundation Flex Grid-এ ব্রেকপয়েন্টস

Foundation এর Flex Grid সিস্টেম বিভিন্ন স্ক্রীন সাইজে উপযুক্ত লেআউট তৈরি করতে ব্রেকপয়েন্ট ব্যবহার করে। এটি এমনভাবে কাজ করে যাতে এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসে উপযুক্তভাবে ফিট হয়।

ব্রেকপয়েন্টস:

• small: মোবাইল ডিভাইসের জন্য (≤ 640px)
• medium: ট্যাবলেট ডিভাইসের জন্য (≥ 641px এবং ≤ 1024px)
• large: ডেস্কটপ ডিভাইসের জন্য (≥ 1025px)
• xlarge: বড় স্ক্রীন বা ডেস্কটপ (≥ 1200px)

Foundation এর Flex Grid সিস্টেম Flexbox প্রযুক্তির উপর ভিত্তি করে তৈরি, যা ডেভেলপারদের জন্য অত্যন্ত শক্তিশালী, ফ্লেক্সিবল এবং রেসপনসিভ গ্রিড সিস্টেম প্রদান করে। এর মাধ্যমে আপনি সহজে ওয়েব পেজের লেআউট কাস্টমাইজ করতে পারেন, এবং বিভিন্ন স্ক্রীন সাইজে কনটেন্টের প্রদর্শন উন্নত করতে পারেন। Foundation এর Flex Grid সিস্টেমের মধ্যে কলাম এবং রো ব্যবহার করে, নেস্টেড কলাম, ব্রেকপয়েন্ট এবং রেসপনসিভ ডিজাইন একত্রিত করে অত্যন্ত কার্যকরী ওয়েবসাইট তৈরি করা সম্ভব।