Row এবং Column এর মাধ্যমে লেআউট তৈরি করা

Foundation ফ্রেমওয়ার্কের গ্রিড সিস্টেম হল একটি শক্তিশালী টুল, যা ওয়েব পেজের কনটেন্টকে রেসপনসিভ এবং সুন্দরভাবে সাজাতে সহায়তা করে। Foundation-এর গ্রিড সিস্টেমে Row এবং Column ব্যবহার করে লেআউট তৈরি করা হয়। এই সিস্টেমটি 12-কোলাম গ্রিড ব্যবহৃত করে, যা ওয়েব পেজের কনটেন্টকে বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে উপস্থাপন করতে সাহায্য করে।

Row এবং Column কি?

• Row: রো হলো একটি অনুভূমিক কনটেইনার, যা কলামগুলো ধারণ করে। এটি সাধারণত একটি <div class="row"> ট্যাগে থাকে।
• Column: কলাম হলো গ্রিডের একক অংশ। প্রতিটি কলাম একটি নির্দিষ্ট প্রস্থ (width) গ্রহণ করে এবং এই প্রস্থ বিভিন্ন স্ক্রীনে পরিবর্তিত হয়।

Foundation-এর গ্রিড সিস্টেমের মাধ্যমে, আমরা বিভিন্ন সংখ্যক কলামকে একাধিক রোতে সাজিয়ে প্রয়োজনীয় লেআউট তৈরি করতে পারি।

Row এবং Column ব্যবহার করে গ্রিড তৈরি করা

Foundation ফ্রেমওয়ার্কে একটি Row কনটেইনারের মধ্যে Column গুলো রাখা হয়। প্রতিটি Column গ্রিডের একটি নির্দিষ্ট অংশ দখল করে এবং আপনি চাইলে কলামের প্রস্থ কাস্টমাইজ করতে পারেন।

১. বেসিক রো এবং কলাম

<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>

এখানে:

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

২. নেস্টেড কলাম (Nested Columns)

Foundation এর গ্রিড সিস্টেমে একটি কলামের মধ্যে আরও কলাম রাখা যেতে পারে, যার মাধ্যমে নেস্টেড লেআউট তৈরি করা সম্ভব।

<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>

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

কলামের প্রস্থ কাস্টমাইজেশন

Foundation এর গ্রিড সিস্টেমে কলামের প্রস্থ কাস্টমাইজ করতে small, medium, large ক্লাস ব্যবহার করা হয়। প্রতিটি ক্লাসের জন্য কলামের প্রস্থ নির্ধারণ করা হয়:

উদাহরণ:

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

এখানে:

• small-12: মোবাইল স্ক্রীনে কলামটি সম্পূর্ণ প্রস্থ নেবে (১২ কলাম)
• medium-8: ট্যাবলেট স্ক্রীনে কলামটি ৮ কলাম দখল করবে
• large-6: ডেস্কটপ স্ক্রীনে কলামটি ৬ কলাম দখল করবে

এভাবে Foundation-এর গ্রিড সিস্টেমের মাধ্যমে responsive লেআউট তৈরি করা যায়, যাতে এটি বিভিন্ন ডিভাইসের স্ক্রীনে সঠিকভাবে প্রদর্শিত হয়।

রেসপনসিভ ব্রেকপয়েন্ট

Foundation-এ চারটি প্রধান ব্রেকপয়েন্ট থাকে, যা বিভিন্ন স্ক্রীন সাইজ অনুযায়ী কনটেন্টের প্রদর্শন পরিবর্তন করতে সাহায্য করে:

• small: মোবাইল ডিভাইসের জন্য
• medium: ট্যাবলেট ডিভাইসের জন্য
• large: বড় স্ক্রীন (ডেস্কটপ) জন্য
• xlarge: বড় ডেস্কটপ স্ক্রীন

উদাহরণ:

<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>

এখানে:

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

Foundation এর Row এবং Column সিস্টেম খুবই শক্তিশালী এবং ব্যবহারবান্ধব। এটি responsive ওয়েবসাইট তৈরির জন্য একটি সোজা এবং কার্যকরী পদ্ধতি প্রদান করে। আপনি বিভিন্ন স্ক্রীন সাইজের জন্য কলাম এবং রো কাস্টমাইজ করে সঠিক লেআউট তৈরি করতে পারবেন। এটি একটি ফ্লেক্সিবল গ্রিড সিস্টেম যা ওয়েব ডেভেলপমেন্টে দ্রুততার সাথে কাস্টম লেআউট তৈরি করতে সাহায্য করে।