Flex Grid এর মাধ্যমে Responsive লেআউট তৈরি

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

Flex Grid কী?

Flex Grid হলো Flexbox এর ওপর ভিত্তি করে তৈরি একটি গ্রিড সিস্টেম, যেখানে উপাদানগুলো স্বয়ংক্রিয়ভাবে অ্যালাইন এবং আকার পরিবর্তন করতে সক্ষম। এটি গ্রিড সিস্টেমের সবচেয়ে নতুন এবং ফ্লেক্সিবল (flexible) সংস্করণ, যা সোজা উপায়ে বিভিন্ন ব্রেকপয়েন্টে কনটেন্ট পরিবর্তন করতে পারে।

Foundation ফ্রেমওয়ার্কের গ্রিড সিস্টেমে একটি 12-কলাম গ্রিড রয়েছে, যা Flexbox প্রযুক্তির মাধ্যমে আরও শক্তিশালী ও ব্যবহারবান্ধব হয়ে উঠেছে।

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

1. 12-কলাম গ্রিড: এটি ১২টি কলাম নিয়ে কাজ করে, যার মাধ্যমে আপনি সেগুলি শেয়ার এবং কাস্টমাইজ করে লেআউট তৈরি করতে পারেন।
2. মোবাইল-ফার্স্ট অ্যাপ্রোচ: Flex Grid সিস্টেমটি মোবাইল-ফার্স্ট ডিজাইন ধারণা অনুসরণ করে তৈরি হয়েছে। প্রথমে মোবাইল ডিভাইসে কনটেন্ট প্রদর্শিত হয়, এবং তারপর বড় স্ক্রীনে সামঞ্জস্যপূর্ণ হয়ে ওঠে।
3. নেস্টেড গ্রিড: Flex Grid সিস্টেমে আপনি একটি গ্রিডের মধ্যে আরেকটি গ্রিড নেস্ট করতে পারেন, যা আরও জটিল লেআউট তৈরি করতে সাহায্য করে।
4. ব্রেকপয়েন্টস: Flex Grid বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টমাইজেশন সমর্থন করে, যেমন মোবাইল, ট্যাবলেট, ডেস্কটপ ইত্যাদি।
5. গাটার স্পেস (Gutter space): Foundation-এর গ্রিড সিস্টেমে প্রতিটি কলামের মধ্যে স্পেস বা গাটার নিয়ন্ত্রণ করা যায়।

Flex Grid এর মাধ্যমে Responsive লেআউট তৈরি করা

Foundation ফ্রেমওয়ার্কে Flex Grid ব্যবহার করে কিভাবে রেসপনসিভ লেআউট তৈরি করা যায় তার একটি উদাহরণ:

১. বেসিক রেসপনসিভ লেআউট

<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: ডেস্কটপে ৪টি কলাম হবে (এক তৃতীয়াংশ প্রস্থ)।

২. নেস্টেড গ্রিড ব্যবহার করা

<div class="row">
  <div class="small-12 medium-6 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-6 large-6 columns">
    <p>দ্বিতীয় কলাম</p>
  </div>
</div>

এখানে:

• প্রথম কলামের মধ্যে একটি নতুন রো (row) আছে, যার মধ্যে দুটি ছোট কলাম রয়েছে। এটি নেস্টেড গ্রিড হিসেবে পরিচিত।

৩. ব্রেকপয়েন্ট ব্যবহার করা

Foundation ফ্রেমওয়ার্কে বিভিন্ন ব্রেকপয়েন্ট সাপোর্ট রয়েছে, যার মাধ্যমে আপনি বিভিন্ন স্ক্রীনে কনটেন্টের প্রস্থ পরিবর্তন করতে পারেন। নিচের উদাহরণে মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য আলাদা প্রস্থ নির্ধারণ করা হয়েছে:

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

এখানে:

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

Foundation Flex Grid এর কাস্টমাইজেশন

Foundation গ্রিড সিস্টেমটি অনেক কাস্টমাইজযোগ্য। কিছু সাধারণ কাস্টমাইজেশন যেমন গ্রিড কলাম সংখ্যা, গাটার প্রস্থ এবং ব্রেকপয়েন্টের সাইজ পরিবর্তন করা যায়।

১. গ্রিড কলাম সংখ্যা পরিবর্তন

Foundation ডিফল্টভাবে ১২টি কলাম ব্যবহার করে, কিন্তু আপনি এটি কাস্টমাইজ করতে পারেন। যদি আপনি চান গ্রিড সিস্টেম ১৬টি কলাম ব্যবহার করুক, তবে নিচের মতো পরিবর্তন করতে হবে:

$grid-columns: 16;

২. গাটার প্রস্থ পরিবর্তন

আপনি যদি কলামের মধ্যে স্পেস পরিবর্তন করতে চান, তবে $grid-gutter-width ভ্যারিয়েবলটি কাস্টমাইজ করতে হবে:

$grid-gutter-width: 1.5rem;

এটি গ্রিডের কলামের মধ্যে ব্যবধান (gutter space) পরিবর্তন করবে।

৩. ব্রেকপয়েন্ট কাস্টমাইজেশন

Foundation এর ডিফল্ট ব্রেকপয়েন্টগুলো কাস্টমাইজ করা যায়। আপনি যদি চান যে ব্রেকপয়েন্টের সাইজ পরিবর্তন হোক, তাহলে _settings.scss ফাইলে এটি পরিবর্তন করতে হবে:

$small: 30em;   // মোবাইল ব্রেকপয়েন্ট
$medium: 50em;  // ট্যাবলেট ব্রেকপয়েন্ট
$large: 75em;   // ডেস্কটপ ব্রেকপয়েন্ট

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