ফ্লেক্সবক্স এবং গ্রিড সিস্টেমের সাথে XHTML

এক্সএইচটিএমএল (XHTML) ডকুমেন্টে লেআউট ডিজাইন করার জন্য CSS-এর ফ্লেক্সবক্স (Flexbox) এবং গ্রিড সিস্টেম (Grid System) অত্যন্ত শক্তিশালী টুল। এই দুইটি CSS মডেল ব্যবহারের মাধ্যমে আপনি এক্সএইচটিএমএল ডকুমেন্টের কন্টেইনারগুলোর মধ্যে উপাদানগুলোকে সুন্দরভাবে সাজাতে পারেন এবং ওয়েব পেজের লেআউটকে আরও কার্যকর এবং সুন্দর করে তুলতে পারেন।

এখানে আমরা এক্সএইচটিএমএল ডকুমেন্টে ফ্লেক্সবক্স এবং গ্রিড সিস্টেমের ব্যবহার নিয়ে বিস্তারিত আলোচনা করব।

১. ফ্লেক্সবক্স (Flexbox) এবং এক্সএইচটিএমএল

ফ্লেক্সবক্স একটি CSS লেআউট মডেল যা কন্টেইনারের মধ্যে উপাদানগুলোকে সহজেই সাজানোর জন্য ব্যবহৃত হয়। এটি মূলত একটি একমাত্র রৈখিক (one-dimensional) লেআউট সিস্টেম, যেখানে আপনি উপাদানগুলোকে সারিতে (row) বা কলামে (column) সাজাতে পারেন।

১.1 ফ্লেক্সবক্স কন্টেইনার তৈরি করা

একটি ফ্লেক্সবক্স কন্টেইনার তৈরি করতে, প্রথমে display: flex; CSS প্রোপার্টি ব্যবহার করতে হয়। এরপর কন্টেইনারের মধ্যে উপাদানগুলো সোজাসুজি বা কলামে সাজানো যায়।

<div style="display: flex; justify-content: space-between;">
    <div style="width: 30%;">Item 1</div>
    <div style="width: 30%;">Item 2</div>
    <div style="width: 30%;">Item 3</div>
</div>

এখানে:

• display: flex; কন্টেইনারটিকে ফ্লেক্সবক্স কন্টেইনার হিসেবে নির্ধারণ করে।
• justify-content: space-between; উপাদানগুলোর মধ্যে স্পেস ঠিক করে দেয়, যাতে তারা সোজাভাবে এবং সমানভাবে বিতরণ হয়।

১.2 ফ্লেক্সবক্সের অন্যান্য প্রোপার্টি

ফ্লেক্সবক্সে আরও অনেক প্রোপার্টি রয়েছে যা কন্টেইনারের উপাদানগুলোকে আরও নিখুঁতভাবে সাজাতে সাহায্য করে। কিছু গুরুত্বপূর্ণ প্রোপার্টি:

• align-items: কন্টেইনারের উপাদানগুলোর ভরাট করার জন্য (vertical alignment) ব্যবহৃত হয়।
• flex-direction: উপাদানগুলোকে রো (row) বা কলাম (column) আকারে সাজানোর জন্য ব্যবহৃত হয়।
• flex-wrap: উপাদানগুলোকে একাধিক সারিতে রাখতে সহায়তা করে।

<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;">
    <div style="width: 30%;">Item 1</div>
    <div style="width: 30%;">Item 2</div>
    <div style="width: 30%;">Item 3</div>
    <div style="width: 30%;">Item 4</div>
</div>

এটি একাধিক উপাদানকে একই লাইন বা সারিতে সাজাবে এবং প্রয়োজনে নতুন সারিতে ভেঙে যাবে।

২. গ্রিড সিস্টেম (Grid System) এবং এক্সএইচটিএমএল

গ্রিড সিস্টেম একটি CSS লেআউট মডেল যা কন্টেইনারের মধ্যে একাধিক সারি এবং কলাম তৈরি করে। এটি দুটি মাত্রিক (two-dimensional) লেআউট ডিজাইন তৈরি করতে সাহায্য করে, যেখানে আপনি উপাদানগুলোকে কলাম এবং সারির মধ্যে সঠিকভাবে সাজাতে পারেন।

২.1 CSS গ্রিড কন্টেইনার তৈরি করা

গ্রিড সিস্টেম তৈরি করতে, প্রথমে display: grid; প্রোপার্টি ব্যবহার করতে হয় এবং তারপর grid-template-columns এবং grid-template-rows ব্যবহার করে কন্টেইনারের কলাম ও সারির আকার নির্ধারণ করতে হয়।

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

এখানে:

• display: grid; কন্টেইনারটিকে গ্রিড কন্টেইনার হিসেবে তৈরি করে।
• grid-template-columns: 1fr 1fr 1fr; কলামগুলোকে সমানভাবে বিভক্ত করে (৩টি কলাম)।
• gap: 10px; কলাম এবং সারির মধ্যে ব্যবধান (spacing) নির্ধারণ করে।

২.2 গ্রিডে উপাদান গুলো সাজানো

গ্রিডের মধ্যে উপাদানগুলোর স্থান নির্ধারণ করতে grid-column এবং grid-row প্রোপার্টি ব্যবহার করা হয়।

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 20px;">
    <div style="grid-column: span 2;">Item 1 (Spans two columns)</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

এখানে:

• grid-column: span 2; দিয়ে Item 1 কে দুটি কলাম জুড়ে বসানো হয়েছে।
• repeat(3, 1fr) গ্রিডে তিনটি সমান কলাম তৈরি করে।

২.3 গ্রিডে কলাম এবং সারি সমন্বয়

গ্রিড সিস্টেমে কলাম এবং সারির সমন্বয় করা অনেক সহজ। grid-template-columns এবং grid-template-rows প্রোপার্টি ব্যবহার করে আপনি কতগুলি কলাম এবং সারি চান তা নির্ধারণ করতে পারেন।

<div style="display: grid; grid-template-columns: 200px auto 200px; grid-template-rows: 100px auto;">
    <div style="grid-column: 1;">Left Column</div>
    <div style="grid-column: 2;">Main Content</div>
    <div style="grid-column: 3;">Right Column</div>
</div>

এখানে:

• প্রথম কলামটি ২০০px এবং তৃতীয় কলামটি ২০০px চওড়া।
• দ্বিতীয় কলাম (Main Content) স্বয়ংক্রিয়ভাবে বাকি জায়গা নিয়ে নেবে।

৩. ফ্লেক্সবক্স এবং গ্রিড সিস্টেমের তুলনা

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