সিএসএস গ্রিড ভিউ - Css Grid View



গ্রিড ভিউ কি?

একটি ওয়েব পেজকে কলামে বিভক্ত করে লে-আউট তৈরি করা যায়, এটাকেই রেসপন্সিভ গ্রিড-ভিউ বলা হয়।


গ্রিড ভিউ ব্যবহার করে ওয়েব পেজ ডিজাইন করা বেশ সহজ। গ্রিড ভিউ পধতিতে একটি ওয়েব পেজে কোন এলিমেন্টকে খুব সহজেই সঠিক জায়গায় স্থাপন করা যায়।


রেস্পন্সিভ গ্রিড-ভিউ পধতিতে মোট প্রস্থ কে সমান ১২টি ভাগে ভাগ করা হয় অর্থাৎ এই ১২ টি কলাম মিলেই এর মোট প্রস্থ হয় ১০০% হয় এবং ব্রাউজারের আকার পরিবর্তন করার সাথে সাথে এটা সংকুচিত ও প্রসারিত হতে পারে।

নিচের লিংকে ক্লিক করে রেস্পন্সিভ গ্রিড-ভিউ পধতির একটি উদাহরন দেখুন।

রেস্পন্সিভ গ্রিড-ভিউের উদাহরণ



গ্রিড-ভিউ তৈরি করা

প্রথমে সকল html এলিমেন্টের box-sizing প্রোপার্টির মান border-box নির্ধারণ করে দিতে হবে। এর ফলে এলিমেন্টের প্যাডিং এবং বর্ডারসহ সম্পূর্ণ প্রস্থ ও উচ্চতাই গণনা করা হবে।
নিচে এর কোড দেখুন -

কোড

*{
box-sizing: border-box;
1 }


বক্স সাইজ সম্পর্কে আরও বিস্তারিত পড়তে আমাদের সিএসএস বক্স সাইজ টিউটোরিয়ালটি দেখুন।


নিচের কোডগুলো দেখুন, এই কোডগুলো ওপরের মত একটি সাধারণ দুই কলাম এর রেস্পন্সিভ ওয়েব পেজ তৈরি করেছে।

কোড

.menu {width: 25%; float: left;}
.main {width: 75%; float: left;}



আমরা কোন ওয়েব পেজে আরো ভাল রকম নিয়ন্ত্রণ রাখার জন্য ১২ কলামের একটি রেস্পন্সিভ গ্রিড-ভিউ তৈরি করতে পারি। এর জন্য প্রথমে আমরা একটি কলামের জন্য শতকরা মান নির্ণয় করি অর্থাৎ ওয়েব পেজের সম্পূর্ণ প্রস্থকে ১০০% ধরে নিয়ে ১০০% / ১২ কলাম = ৮.৩৩%, প্রতিটি কলাম এর প্রস্থ।
এখন আমরা ১২ টি কলামের প্রতিটির জন্য একটি করে ক্লাস তৈরি করবো class="col-" এবং প্রতিটি ক্লাসের জন্য কলামের প্রস্থ নির্দিষ্ট করে দিব।

সিএসএস

.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%;}


সকল কলামগুলির জন্য float প্রপার্টির মান left এবং padding প্রপার্টির মান 15px নির্ধারণ করে দিতে হবে।

সিএসএস

[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}


প্রতিটি সারি একটি <div> এলিমেন্ট দারা আবৃত করতে হবে এবং প্রতিটি সারির ভিতরে কলামের নামে সর্বদা একটি করে ক্রমিক সংখ্যা যোগ করে দিতে হবে।

এইচটিএমএল

<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>


একটি সারির ভিতরে কলামগুলো সব বামদিকে ফ্লোটিং হয় এবং ওয়েব পেজের ফ্লো থেকে বের হয়ে আসে এবং কলামগুলি বিদ্যমান না থাকলে অন্য উপাদানগুলি সেস্থানে স্থাপন হয়ে যায়। একে নিবারণ করার জন্য, আমরা কিছু সিএসএস কোড যোগ করেছি।

সিএসএস

.row::after {
content: "";
clear: both;
display: table;
}


উদাহরণটি আরও একটু ভালোভাবে দেখতে আমরা কিছু সিএসএস স্টাইল যোগ করেছি।

সিএসএস

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


নোট - যখন ব্রাউজার উইন্ডোটি খুব ছোট প্রস্থের আকারে পরিবর্তন করা হয়, তখন উদাহরণের ওয়েব পেজটি ভাল দেখায় না। পরের অধ্যায়ে আমরা দেখব কিভাবে এটা ঠিক করা যায়।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.