Foundation এর গ্রিড সিস্টেম

Foundation ফ্রেমওয়ার্কে গ্রিড সিস্টেম হল একটি গুরুত্বপূর্ণ ফিচার, যা ওয়েবসাইটের কনটেন্টের লেআউট (layout) সাজানোর জন্য ব্যবহৃত হয়। এই সিস্টেমটি রেসপনসিভ ওয়েব ডিজাইনের জন্য অত্যন্ত কার্যকর, কারণ এটি বিভিন্ন স্ক্রিন সাইজ অনুযায়ী কনটেন্টকে উপযুক্তভাবে প্রদর্শন করতে সক্ষম।

Foundation এর গ্রিড সিস্টেম Flexbox এর ভিত্তিতে কাজ করে এবং এতে মোট ১২টি কলাম থাকে। এর মাধ্যমে ডেভেলপাররা খুব সহজেই কনটেন্টকে বিভিন্ন ডিভাইসের স্ক্রিন সাইজে উপযুক্তভাবে সাজাতে পারেন।

Foundation গ্রিড সিস্টেমের বৈশিষ্ট্য

১. 12-কোলাম লেআউট (12-Column Layout)

Foundation এর গ্রিড সিস্টেমটি একটি ১২-কোলাম সিস্টেমের ওপর ভিত্তি করে তৈরি। এর মানে হল যে, আপনি ১২টি কলামে কনটেন্ট ভাগ করতে পারবেন এবং যে কোনো কলামের জন্য প্রস্থ (width) নির্ধারণ করতে পারবেন। উদাহরণস্বরূপ, একটি এলিমেন্টের প্রস্থ ১ থেকে ১২ কলাম পর্যন্ত হতে পারে।

২. রেসপনসিভ (Responsive)

Foundation এর গ্রিড সিস্টেম স্বয়ংক্রিয়ভাবে বিভিন্ন স্ক্রীন সাইজের জন্য সাড়া দেয়। এটি একটি মোবাইল-ফার্স্ট গ্রিড সিস্টেম, যার মানে হচ্ছে যে, এটি মোবাইল ডিভাইসে ভালোভাবে কাজ করবে এবং বড় ডিভাইসে এটি অটো রিসাইজ হবে।

৩. নেস্টেড লেআউট (Nested Layouts)

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

৪. সাজানো ইউনিট (Flexible Units)

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

গ্রিড সিস্টেমের মৌলিক ধারণা

Foundation-এর গ্রিড সিস্টেমে প্রধানত তিনটি উপাদান থাকে:

1. রো (Row): গ্রিডের অনুভূমিক রূপরেখা। একটি রো একাধিক কলাম ধারণ করতে পারে।
2. কলাম (Column): রো এর মধ্যে এলিমেন্ট বা কন্টেন্ট বসানোর জায়গা।
3. সাহায্যকারী ক্লাস (Helper Classes): রেসপনসিভ ব্রেকপয়েন্ট ও কলাম প্রস্থের জন্য বিভিন্ন CSS ক্লাস।

গ্রিড ব্যবহারের উদাহরণ

১. বেসিক গ্রিড লেআউট

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

এখানে, একটি রো এর মধ্যে আরও একটি রো এবং কলাম রয়েছে, যা নেস্টিং নির্দেশ করে।

ব্রেকপয়েন্টস (Breakpoints)

Foundation এর গ্রিড সিস্টেমে রেসপনসিভ ডিজাইন তৈরি করার জন্য বিভিন্ন ব্রেকপয়েন্ট ব্যবহৃত হয়। এই ব্রেকপয়েন্টগুলো স্ক্রীন সাইজ অনুযায়ী কনটেন্টের প্রদর্শন স্টাইল পরিবর্তন করে। Foundation এ সাধারণত ৪টি ব্রেকপয়েন্ট থাকে:

• small (ফোনের জন্য): মোবাইল ডিভাইসের জন্য (480px বা তার কম)
• medium (ট্যাবলেটের জন্য): ট্যাবলেট ডিভাইসের জন্য (640px - 1024px)
• large (ডেস্কটপের জন্য): বড় স্ক্রীনের জন্য (1024px - 1200px)
• xlarge (বড় ডেস্কটপের জন্য): খুব বড় স্ক্রীনের জন্য (1200px বা তার বেশি)

উদাহরণ:

<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 এর গ্রিড সিস্টেম খুবই শক্তিশালী এবং ফ্লেক্সিবল, যা বিভিন্ন স্ক্রীন সাইজের জন্য রেসপনসিভ ডিজাইন তৈরি করতে সাহায্য করে। এর ১২-কোলাম সিস্টেম এবং Flexbox সাপোর্ট ডেভেলপারদের কাস্টম লেআউট তৈরি করতে সাহায্য করে। এর মাধ্যমে আপনি সহজেই বিভিন্ন ডিভাইসের জন্য উপযুক্ত ওয়েব পেজ তৈরি করতে পারবেন।

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

Flexbox: পরিচিতি

Flexbox (Flexible Box Layout) হল একটি CSS লেআউট মডেল, যা লচিল (flexible) এবং অ্যাডজাস্টেবল লেআউট তৈরি করতে ব্যবহৃত হয়। এটি উপাদানগুলিকে খুব সহজে একটি সারি (row) বা কলামে (column) সজ্জিত করতে সাহায্য করে, এবং প্রতিটি উপাদান তার পজিশন এবং আকার অটোমেটিকভাবে অ্যাডজাস্ট করে নেয়।

Flexbox এর বৈশিষ্ট্য:

1. অ্যাডজাস্টেবল লেআউট: Flexbox উপাদানগুলির আকার এবং স্থান স্বয়ংক্রিয়ভাবে সামঞ্জস্য করে।
2. রেসপনসিভ ডিজাইন: Flexbox বিভিন্ন স্ক্রীন সাইজের জন্য কনটেন্টের আকার পরিবর্তন করতে সক্ষম।
3. কাস্টমাইজড অ্যালাইনমেন্ট: উপাদানগুলিকে কেন্দ্র, বাঁয়ে বা ডানদিকে একত্রিত করা যায়।
4. নেস্টেড লেআউট: Flexbox সহজে নেস্টেড উপাদান তৈরি করতে সাহায্য করে।

Flexbox ব্যবহারের উদাহরণ:

<div style="display: flex; justify-content: space-between;">
  <div>কলাম ১</div>
  <div>কলাম ২</div>
  <div>কলাম ৩</div>
</div>

এই কোডে, তিনটি div উপাদান একটি সারিতে সজ্জিত হবে, যেখানে justify-content: space-between ব্যবহৃত হয়েছে, যাতে উপাদানগুলো একে অপর থেকে সমানভাবে দূরে থাকে।

Foundation এর গ্রিড সিস্টেম

Foundation এর গ্রিড সিস্টেম মূলত Flexbox এর সুবিধাগুলো গ্রহণ করে, তবে Foundation এটিকে আরও কাস্টমাইজড ও ব্যবহারযোগ্য করে তোলে। Foundation গ্রিড সিস্টেমে ১২টি কলাম থাকে এবং এটি বিভিন্ন ব্রেকপয়েন্টে কনটেন্ট অ্যাডজাস্ট করতে সক্ষম।

Foundation গ্রিড সিস্টেমের বৈশিষ্ট্য:

1. 12-কোলাম লেআউট: মূল গ্রিডটি ১২টি কলামের উপর ভিত্তি করে তৈরি, যা ডেভেলপারদের জন্য কনটেন্ট কাস্টমাইজ করা সহজ করে।
2. Flexbox-ভিত্তিক: Flexbox ব্যবহার করে Foundation এর গ্রিড সিস্টেম স্বয়ংক্রিয়ভাবে কলামগুলিকে এডজাস্ট করে।
3. রেসপনসিভ ব্রেকপয়েন্ট: Foundation স্বয়ংক্রিয়ভাবে বিভিন্ন ডিভাইসের জন্য গ্রিড লেআউটের প্রস্থ পরিবর্তন করে, যেমন মোবাইল, ট্যাবলেট, এবং ডেস্কটপ।
4. নেস্টেড গ্রিড: গ্রিডের মধ্যে আরেকটি গ্রিড বা কলাম রাখা সম্ভব, যা আরও জটিল লেআউট তৈরি করতে সাহায্য করে।

Foundation গ্রিড সিস্টেমে ব্যবহৃত কিছু ক্লাস:

• row: রো তৈরি করার জন্য।
• columns: কলাম তৈরি করার জন্য।
• small-12, medium-6, large-4: বিভিন্ন স্ক্রীনে কলামের প্রস্থ নির্ধারণের জন্য।

Foundation গ্রিড সিস্টেমের উদাহরণ:

<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: বড় ডিভাইসে এক তৃতীয়াংশ প্রস্থ।

Flexbox বনাম Foundation গ্রিড সিস্টেম

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

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 ওয়েবসাইট তৈরির জন্য একটি সোজা এবং কার্যকরী পদ্ধতি প্রদান করে। আপনি বিভিন্ন স্ক্রীন সাইজের জন্য কলাম এবং রো কাস্টমাইজ করে সঠিক লেআউট তৈরি করতে পারবেন। এটি একটি ফ্লেক্সিবল গ্রিড সিস্টেম যা ওয়েব ডেভেলপমেন্টে দ্রুততার সাথে কাস্টম লেআউট তৈরি করতে সাহায্য করে।

Foundation ফ্রেমওয়ার্কে Responsive Breakpoints এবং Grid Customization ওয়েব ডিজাইনকে রেসপনসিভ এবং কাস্টমাইজযোগ্য করে তোলে। এর মাধ্যমে ওয়েবসাইটের কনটেন্ট বিভিন্ন স্ক্রীন সাইজে (মোবাইল, ট্যাবলেট, ডেস্কটপ) সঠিকভাবে প্রদর্শিত হয়। Foundation এর গ্রিড সিস্টেম এবং ব্রেকপয়েন্টস ব্যবহার করে ডেভেলপাররা সহজেই ওয়েবসাইটের লেআউট এবং স্টাইলিং কাস্টমাইজ করতে পারেন।

Responsive Breakpoints

Responsive Breakpoints হলো সেগুলি যেখানে ওয়েবসাইটের লেআউট বা ডিজাইন পরিবর্তিত হয়। Foundation ফ্রেমওয়ার্কে বেশ কয়েকটি ডিফল্ট ব্রেকপয়েন্ট রয়েছে, যা বিভিন্ন স্ক্রীন সাইজে কনটেন্ট পরিবর্তন করতে ব্যবহৃত হয়।

Foundation এর ডিফল্ট ব্রেকপয়েন্টস:

1. small: মোবাইল (480px বা তার কম)
2. medium: ট্যাবলেট (641px - 1024px)
3. large: ডেস্কটপ (1025px - 1200px)
4. xlarge: বড় ডেস্কটপ (1201px বা তার বেশি)

Foundation ডিফল্টভাবে এই ব্রেকপয়েন্টস ব্যবহার করে কনটেন্টের লেআউট, কলাম সাইজ এবং অন্যান্য উপাদান পরিবর্তন করতে সক্ষম।

উদাহরণ: ব্রেকপয়েন্ট ব্যবহার করে রেসপনসিভ ডিজাইন

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

এই ব্রেকপয়েন্টগুলির মাধ্যমে কনটেন্ট বিভিন্ন স্ক্রীনে সঠিকভাবে উপস্থাপন হবে।

Grid Customization

Foundation এর গ্রিড সিস্টেম ১২টি কলাম নিয়ে কাজ করে। তবে এই গ্রিড সিস্টেমটি কাস্টমাইজ করা যায় যাতে এটি আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী আরও ফ্লেক্সিবল এবং শক্তিশালী হয়।

গ্রিড সিস্টেম কাস্টমাইজ করার জন্য কিছু গুরুত্বপূর্ণ সেটিংস:

1. $grid-columns: গ্রিডের মোট কলাম সংখ্যা। ডিফল্টে এটি ১২, তবে আপনি প্রয়োজন অনুযায়ী এটি পরিবর্তন করতে পারেন।

   $grid-columns: 16;
   

2. $grid-gutter-width: গ্রিডের মধ্যে ব্যবধান (gutter width)। এটি কাস্টমাইজ করে কলামের মধ্যে স্পেস নিয়ন্ত্রণ করতে পারেন।

   $grid-gutter-width: 1.5rem;
   

3. $grid-padding: গ্রিডের প্রতি কলামে প্যাডিং নির্ধারণ করা হয়।

   $grid-padding: 1rem;
   

গ্রিড সিস্টেম কাস্টমাইজ করার উদাহরণ:

$grid-columns: 16;   // ১৬ কলামের গ্রিড সিস্টেম
$grid-gutter-width: 2rem;  // ২rem গাটার স্পেস

এটি গ্রিড সিস্টেমের কলাম সংখ্যা এবং গাটার স্পেস পরিবর্তন করবে, যার ফলে আপনি আরও সূক্ষ্মভাবে কনটেন্টের লেআউট কাস্টমাইজ করতে পারবেন।

Grid Nesting (নেস্টেড গ্রিড)

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

উদাহরণ: নেস্টেড গ্রিড

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

এখানে:

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

গ্রিড সিস্টেমের ব্রেকপয়েন্ট কাস্টমাইজেশন

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

ব্রেকপয়েন্ট কাস্টমাইজেশন উদাহরণ:

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

এটি আপনার গ্রিড সিস্টেমে মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য ব্রেকপয়েন্ট কাস্টমাইজ করবে।

Foundation এর Responsive Breakpoints এবং Grid Customization ফ্রেমওয়ার্কটি অত্যন্ত ফ্লেক্সিবল এবং শক্তিশালী, যা আপনাকে রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে সহায়তা করে। এর গ্রিড সিস্টেম ১২টি কলামের মাধ্যমে লেআউট সাজানো হয়, যা সহজেই কাস্টমাইজ করা যায় এবং মোবাইল-ফার্স্ট ডিজাইন অ্যাপ্রোচে কাজ করে। এছাড়াও, Foundation এর নেস্টেড গ্রিড এবং ব্রেকপয়েন্ট কাস্টমাইজেশন ওয়েবসাইটের লেআউটকে আরও পেশাদার এবং স্কেলেবল করে তোলে।

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

Block Grid এর ব্যবহার

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

Block Grid কিভাবে কাজ করে

Block Grid ব্যবহার করার জন্য .block-grid ক্লাস এবং একটি নির্দিষ্ট সংখ্যক কলামের ক্লাস ব্যবহার করা হয়। নিচে এর ব্যবহার এবং উদাহরণ দেখানো হল:

উদাহরণ:

<div class="row">
  <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
    <li>
      <div class="panel">Block 1</div>
    </li>
    <li>
      <div class="panel">Block 2</div>
    </li>
    <li>
      <div class="panel">Block 3</div>
    </li>
    <li>
      <div class="panel">Block 4</div>
    </li>
  </ul>
</div>

এখানে:

• small-block-grid-2: মোবাইল ডিভাইসে ২টি ব্লক দেখাবে।
• medium-block-grid-3: ট্যাবলেট ডিভাইসে ৩টি ব্লক দেখাবে।
• large-block-grid-4: ডেস্কটপে ৪টি ব্লক দেখাবে।

এটি একটি responsive grid তৈরি করবে, যেখানে ব্লকগুলো বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সজ্জিত হবে।

Block Grid এর সুবিধা:

1. রেসপনসিভ লেআউট: Foundation Block Grid সহজেই বিভিন্ন স্ক্রীন সাইজে কন্টেন্টের সজ্জা সমন্বয় করে।
2. সহজ কনফিগারেশন: শুধুমাত্র CSS ক্লাস ব্যবহার করেই গ্রিড সিস্টেম তৈরি করা যায়।
3. ব্লক আকার সমান রাখা: সমস্ত ব্লকগুলোর আকার একই রাখা হয়।

Equalizer এর ব্যবহার

Equalizer ফিচারটি Foundation এর একটি শক্তিশালী বৈশিষ্ট্য, যা কনটেন্ট ব্লকগুলোর উচ্চতা স্বয়ংক্রিয়ভাবে সমান করে। এটি বিশেষত তখন ব্যবহৃত হয় যখন আপনি কয়েকটি উপাদান একে অপরের পাশে রাখতে চান এবং তাদের উচ্চতা সমান করতে চান। উদাহরণস্বরূপ, আপনি যদি ৩টি কলাম ব্যবহার করেন এবং এগুলোর মধ্যে একটির উচ্চতা অন্যটির চেয়ে বেশি হয়, তাহলে Equalizer স্বয়ংক্রিয়ভাবে সকল কলামের উচ্চতা সমান করে।

Equalizer কিভাবে কাজ করে

Equalizer কার্যকর করার জন্য .equalizer ক্লাস ব্যবহার করা হয়। নিচে এর ব্যবহার দেখানো হল:

উদাহরণ:

<div class="row" data-equalizer>
  <div class="small-4 columns" data-equalizer-watch>
    <div class="panel">Block 1</div>
  </div>
  <div class="small-4 columns" data-equalizer-watch>
    <div class="panel">Block 2</div>
  </div>
  <div class="small-4 columns" data-equalizer-watch>
    <div class="panel">Block 3</div>
  </div>
</div>

এখানে:

• data-equalizer: পুরো রো বা কলামের জন্য Equalizer অ্যাপ্লাই করে।
• data-equalizer-watch: প্রতিটি কলামের উপর Equalizer অ্যাপ্লাই করার নির্দেশ দেয়, যাতে সেগুলোর উচ্চতা সমান হয়।

Equalizer এর সুবিধা:

1. আকৃতির সামঞ্জস্য: যেকোনো অনিয়মিত উচ্চতা বিশিষ্ট এলিমেন্টের উচ্চতা স্বয়ংক্রিয়ভাবে সমান হয়।
2. রেসপনসিভ: এটি গ্রিডের মধ্যে উপাদানগুলোর উচ্চতা সমান করে দেয়, এমনকি বিভিন্ন স্ক্রীনে।
3. সহজ বাস্তবায়ন: সহজ CSS ক্লাস ব্যবহার করে এটি ইমপ্লিমেন্ট করা যায়, যা কোডিংকে আরও সহজ করে তোলে।

Block Grid এবং Equalizer এর মধ্যে পার্থক্য

Block Grid এবং Equalizer ফিচার দুটি Foundation ফ্রেমওয়ার্কের খুবই কার্যকরী উপাদান, যা ওয়েবসাইটের কন্টেন্টকে সুন্দরভাবে সাজাতে এবং তাদের আকার ও উচ্চতা সমান রাখতে সাহায্য করে। Block Grid উপাদানগুলিকে রেসপনসিভ গ্রিডে সাজানোর জন্য ব্যবহৃত হয়, এবং Equalizer একে অপরের পাশে রাখা উপাদানগুলোর উচ্চতা সমান করে। Foundation এর এই ফিচারগুলো ওয়েব ডেভেলপমেন্টে সময় বাঁচাতে এবং কাস্টমাইজেশন সহজ করতে সহায়ক।