Columns এবং Rows এর ব্যবহার

Bulma CSS ফ্রেমওয়ার্কে Columns এবং Rows ব্যবহার করে খুব সহজে রেসপনসিভ গ্রিড লেআউট তৈরি করা যায়। Bulma এর গ্রিড সিস্টেম flexbox এর উপর ভিত্তি করে কাজ করে, যা ওয়েবসাইটের লেআউট ডিজাইনকে আরও সাচ্ছন্দ্যময় এবং রেসপনসিভ করে তোলে। এখানে Columns এবং Rows এর ব্যবহারের বিভিন্ন দিক আলোচনা করা হলো।

১. Columns এবং Rows কী?

• Columns: Bulma তে columns একটি ডিভ (div) এলিমেন্ট, যার মধ্যে এক বা একাধিক column থাকে। প্রতিটি column এলিমেন্টের মধ্যে কনটেন্ট থাকে এবং এগুলো বিভিন্ন সাইজে হতে পারে, যেমন: is-half, is-one-third, is-full ইত্যাদি।
• Rows: Bulma তে সরাসরি rows ব্যবহার করার কোনো নির্দিষ্ট ক্লাস নেই, তবে columns গ্রুপ করার মাধ্যমে একটি row তৈরি করা যায়। অর্থাৎ, প্রতিটি column একটি row এর অংশ হতে পারে, এবং columns এলিমেন্টটি সম্পূর্ণ রূপে একটি row হিসাবে কাজ করে।

২. Columns তৈরি করা

Bulma তে columns তৈরি করতে আপনাকে <div> ট্যাগ ব্যবহার করতে হবে, যার মধ্যে columns ক্লাস যোগ করতে হবে। প্রতিটি column এর জন্য একটি আলাদা <div> ব্যবহার করতে হয়।

উদাহরণ: সাধারণ Columns

<div class="columns">
  <div class="column">
    <div class="box">
      <p>Column 1</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p>Column 2</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p>Column 3</p>
    </div>
  </div>
</div>

এই কোডে তিনটি column তৈরি করা হয়েছে, এবং প্রতিটি column একটি box ট্যাগে কনটেন্ট ধারণ করছে। columns এলিমেন্টটি তাদের মধ্যে যথাযথ ফ্লেক্সবক্স সিস্টেম প্রয়োগ করবে।

৩. Column সাইজ কাস্টমাইজ করা

Bulma তে আপনি column এর সাইজ কাস্টমাইজ করতে পারবেন। এর জন্য আপনাকে is-one-quarter, is-half, is-three-quarters, is-full ইত্যাদি ক্লাস ব্যবহার করতে হবে। এই ক্লাসগুলো সাইজ পরিবর্তন করতে সাহায্য করে।

উদাহরণ: সাইজ কাস্টমাইজ করা

<div class="columns">
  <div class="column is-half">
    <div class="box">
      <p>Column 1 (50%)</p>
    </div>
  </div>
  <div class="column is-half">
    <div class="box">
      <p>Column 2 (50%)</p>
    </div>
  </div>
</div>

এখানে দুটি column রয়েছে এবং প্রতিটির সাইজ is-half ক্লাস ব্যবহার করে ৫০% করে দেয়া হয়েছে।

৪. Column Alignment

Bulma তে আপনি columns এর কনটেন্টকে align বা স্থানান্তর করতে পারেন। এর জন্য is-centered, is-right, is-offset-1, ইত্যাদি ক্লাস ব্যবহার করা হয়।

উদাহরণ: কনটেন্ট সেন্টারিং

<div class="columns is-centered">
  <div class="column is-half">
    <div class="box">
      <p>Centered Column</p>
    </div>
  </div>
</div>

এখানে is-centered ক্লাস ব্যবহার করে columns কে সেন্টারে রাখা হয়েছে। আপনি is-right ব্যবহার করেও কনটেন্টকে ডান দিকে স্থানান্তর করতে পারবেন।

৫. Column এর ভিতর Nested Columns

Bulma তে আপনি একটি column এর মধ্যে অন্য একটি columns তৈরি করতে পারেন। এটি nested columns নামে পরিচিত। এটি আপনাকে আরও জটিল লেআউট তৈরি করতে সাহায্য করে।

উদাহরণ: Nested Columns

<div class="columns">
  <div class="column is-half">
    <div class="box">
      <p>Column 1 (50%)</p>
      <div class="columns">
        <div class="column is-half">
          <div class="box">
            <p>Nested Column 1 (25%)</p>
          </div>
        </div>
        <div class="column is-half">
          <div class="box">
            <p>Nested Column 2 (25%)</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-half">
    <div class="box">
      <p>Column 2 (50%)</p>
    </div>
  </div>
</div>

এখানে একটি nested columns তৈরি করা হয়েছে, যেখানে প্রথম column এর মধ্যে দুটি nested column রয়েছে। প্রতিটি nested column এর সাইজ is-half ক্লাস দ্বারা ৫০% রাখা হয়েছে।

৬. Column Visibility

Bulma তে column এর visibility কন্ট্রোল করতে is-hidden ক্লাস ব্যবহার করা হয়। এটি ব্যবহার করে আপনি নির্দিষ্ট কলামগুলোকে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী скры隐藏 করতে পারেন।

উদাহরণ: Responsive Column Visibility

<div class="columns">
  <div class="column is-half is-hidden-mobile">
    <div class="box">
      <p>This column is hidden on mobile screens</p>
    </div>
  </div>
  <div class="column is-half">
    <div class="box">
      <p>This column is visible on all screens</p>
    </div>
  </div>
</div>

এখানে is-hidden-mobile ক্লাস ব্যবহার করা হয়েছে, যার ফলে প্রথম columnটি শুধুমাত্র ডেক্সটপ স্ক্রীনে দেখাবে এবং মোবাইল স্ক্রীনে লুকিয়ে যাবে।

৭. Columns এর মধ্যে Spacing

Bulma তে columns এর মধ্যে spacing (gutter) কাস্টমাইজ করার জন্য is-gapless এবং is-variable ক্লাস ব্যবহার করা হয়।

উদাহরণ: Spacing কাস্টমাইজ করা

<div class="columns is-variable is-4">
  <div class="column">
    <div class="box">
      <p>Column 1</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p>Column 2</p>
    </div>
  </div>
  <div class="column">
    <div class="box">
      <p>Column 3</p>
    </div>
  </div>
</div>

এখানে is-variable is-4 ক্লাসের মাধ্যমে columns এর মধ্যে spacing বা gap ৪ ইউনিটে সেট করা হয়েছে।

সারাংশ

Bulma এর columns এবং rows সিস্টেম ব্যবহার করে আপনি সহজেই রেসপনসিভ এবং আকর্ষণীয় ওয়েব লেআউট তৈরি করতে পারবেন। columns ক্লাস দিয়ে বিভিন্ন কলাম তৈরি করা যায় এবং এগুলোর সাইজ, alignment, visibility ইত্যাদি কাস্টমাইজ করা সম্ভব। nested columns এবং spacing নিয়ন্ত্রণের মাধ্যমে আরও জটিল লেআউট ডিজাইন করা যায়। Bulma এর flexbox ভিত্তিক গ্রিড সিস্টেম ওয়েব ডিজাইনে একটি শক্তিশালী টুল হিসেবে কাজ করে।