কোন ওয়েব পেজকে কত গুলো কলামে বিভক্ত করে লে-আউট তৈরি করা যায়, এটাকেই রেসপন্সিভ গ্রিড-ভিউ বলা হয়। নিচে সিএসএস ব্যবহার করে একটি গ্রিড-ভিউ তৈরি করা হয়েছে, তা দেখুন।
গ্রিড ভিউ পদ্ধতি ব্যবহার করে কোন ওয়েব পেজ কে খুব সহজেই রেসপন্সিভ ডিজাইন করা যায়। গ্রিড ভিউ পদ্ধতিতে একটি ওয়েব পেজে কোন এলিমেন্টকে খুব সহজেই সঠিক জায়গায় স্থাপন করা যায়।
রেস্পন্সিভ গ্রিড-ভিউ পদ্ধতিতে মোট প্রস্থ বা width কে সমান ১২টি ভাগে ভাগ করা হয় অর্থাৎ এই ১২ টি কলাম মিলেই এর মোট প্রস্থ বা width ১০০% হয় এবং ব্রাউজার উইন্ডোর আকার পরিবর্তন করার সাথে সাথে এটা সংকুচিত ও প্রসারিত হতে পারে।
নিচের লিংকে ক্লিক করে রেস্পন্সিভ গ্রিড-ভিউ পধতির একটি উদাহরন দেখুন।
প্রথমে সকল এইচটিএমএল এলিমেন্টের জন্য সিএসএস এর box-sizing প্রোপার্টির মান border-box নির্ধারণ করে দিতে হবে। এর ফলে এইচটিএমএল এলিমেন্টের প্যাডিং এবং বর্ডারসহ সম্পূর্ণ প্রস্থ ও উচ্চতাই গণনা করা হবে। নিচে এর জন্ন সিএসএস স্টাইল কোড দেখুন -
* { box-sizing: border-box; }
সিএসএস এর box-sizing প্রোপার্টি সম্পর্কে আরও বিস্তারিত জানতে আমাদের সিএসএস বক্স সাইজ টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।
নিচের সিএসএস স্টাইল কোড গুলো দেখুন, এই সিএসএস কোড গুলো ওপরের মত একটি সাধারণ দুই কলাম এর রেস্পন্সিভ ওয়েব পেজ তৈরি করেছে।
<style> .menu { width: 25%; float: left; } .content { width: 75%; float: left; } <style> <div class="menu"> 25% width </div> <div class="content"> 75% width </div>
আমরা কোন ওয়েব পেজে আরো ভাল রকম নিয়ন্ত্রণ রাখার জন্য ১২ কলামের একটি রেস্পন্সিভ গ্রিড-ভিউ তৈরি করতে পারি। এর জন্য প্রথমে আমরা একটি কলামের জন্য শতকরা মান বা % নির্ণয় করি অর্থাৎ ওয়েব পেজের সম্পূর্ণ প্রস্থকে ১০০% ধরে নিয়ে ১০০% / ১২ কলাম = ৮.৩৩%, প্রতিটি কলাম এর প্রস্থ।
এখন আমরা ১২ টি কলামের প্রতিটির জন্য সিএসএস এর class সিলেক্টর ব্যবহার করে একটি করে ক্লাস তৈরি করবো class="col-" এবং প্রতিটি ক্লাসের জন্য কলামের প্রস্থ বা width নির্দিষ্ট করে দিব।
.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}
[class*="col-"] { float: left; padding: 15px; border: 1px solid red; }
প্রতিটি সারি একটি div এলিমেন্ট অর্থাৎ <div> ট্যাগ ব্যবহার করে আবৃত করতে হবে এবং প্রতিটি সারির ভিতরে কলামের নামে সর্বদা একটি করে ক্রমিক সংখ্যা যোগ করে দিতে হবে। নিচে এর জন্য এইচটিএমএল কোড গুলো দেখুন।
<div class="row"> <div class="col-3"> ... </div> <div class="col-9"> ... </div> </div>
একটি সারির ভিতরে কলাম গুলো সব বামদিকে অবস্থান করে সিএসএস float প্রোপার্টি ব্যবহার করার জন্য এবং ওয়েব পেজের ফ্লো থেকে বের হয়ে আসে এবং কলাম গুলি বিদ্যমান না থাকলে অন্য উপাদানগুলি সেস্থানে স্থাপন হয়ে যায়। একে নিবারণ করার জন্য, আমরা নিচের মত কিছু সিএসএস কোড যোগ করেছি।
.row::after { content: ""; clear: both; display: table; }
উদাহরণটিকে আরও একটু ভালো ভাবে প্রদর্শন করার জন্য আমরা নিচের মত কিছু সিএসএস স্টাইল কোড, যেমন - font-family, padding, margin, background-color ইত্যাদি প্রোপার্টি যোগ করেছি।
html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; }
নোট - যখন ব্রাউজার উইন্ডোটি খুব ছোট প্রস্থ বা width এর আকারে পরিবর্তন করা হয়, তখন উদাহরণের ওয়েব পেজটি ভাল দেখায় না। পরের অধ্যায়ে আমরা দেখব কিভাবে এটা ঠিক করা যায়।