X

X

X

রেসপনসিভ ওয়েব ডিজাইন - গ্রিডভিউ


রেসপনসিভ ওয়েব ডিজাইন – গ্রিডভিউ


Grid-View বলতে কি বোঝায়?

একটি ওয়েবপেজকে বিভিন্ন প্রস্থবিশিষ্ট কলামে ভাগ করে উপস্থাপণ করাকে গ্রিডভিউ বলে:

গ্রিডভিউ ব্যবহার করার অনেক সুবিধা রয়েছে। এটি ব্যবহার করে খুব সহজে বিভিন্ন ইলামেন্টকে ইচ্ছেমত বিভিন্ন অবস্থানে উপস্থাপণ করা যায়।

সাধারণত একটি রেসপনসিভ গ্রিডভিউ-এর ১২টি কলাম থাকে এবং তাদের মোট প্রস্থ কন্টেইনার পজিশন্ড ইলামেন্টের সাপেক্ষে ১০০% হয়ে থাকে। যখন ব্রাউজারের প্রস্থ বেশি হয়, এগুলো স্বয়ংক্রিয়ভাবে বৃদ্ধি পায়। আবার যখন ব্রাউজারের প্রস্থ হ্রাস পায়, তখন এগুলোর প্রস্থও হ্রাস পায়।

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


রেসপনসিভ গ্রিডভিউ তৈরি করার পদ্ধতি

প্রথমে সব গ্রিড ইলামেন্টের box-sizing property এর মান border-box নির্ধারণ করতে হবে। এর কাজ হচ্ছে কোনো ইলামেন্টের প্রস্থ বা দৈর্ঘ্য যেনো বর্ডার এরিয়া থেকে বিবেচিত হয় সেটি ব্রাউজারকে নির্দেশনা দেওয়া। ডিফল্টভাবে ব্রাউজার কন্টেন্টের প্রস্থ ও দৈর্ঘ্যকে বিবেচনা করে থাকে।

CSS স্টাইলের সাথে নিচের কোডটি যুক্ত করুণ:

* {
    box-sizing: border-box;
}

Read more about the box-sizing property in our CSS Box Sizing chapter.

The following example shows a simple responsive web page, with two columns:

25%
75%

Code Example

.menu {
    width: 25%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.main {
    width: 75%;
    float: left;
    padding: 15px;
    border: 1px solid red;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

যদি ওয়েবপেজে শুধুমাত্র দুটি কলাম থাকে, তবে উপরের উদাহরণটি ঠিক আছে।

কিন্তু আমাদের লক্ষ্য হচ্ছে ১২ টি কলাম তৈরি করা, যাতে পেজটিকে আরও গভীরভাবে নিয়ন্ত্রণ করা যায়।

প্রথমে প্রতিটি কলামের গড় প্রস্থ নির্ধারণ করতে হবে: 100% / 12 columns =
8.33%.

তারপর ঐ মানকে একটি কলামেরে প্রস্থ হিসেবে সেট করার জন্য একটি ক্লাস তৈরি করবো। আরেকটি ক্লাস তৈরি করবো , যেটি দিয়ে কলামটি কতটি কলামের প্রস্থের সমষ্টি হবে তা বর্ণনা করা হবে :

Code Example

.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 প্রপার্টি সেট করতে হবে এবং কন্টেন্টসমূহকে দৃষ্টিনন্দনভাবে উপস্থাপণের জন্য 15px প্যাডিং সেট করতে হবে।

CSS:

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

প্রতিটি row কে একটি <div> ইলামেন্টের ভেতরে উপস্থাপণ করতে হবে। আর উক্ত row এর ভেতরে সর্বমোট কলামের সংখ্যা হবে ১২।

HTML:

<div class="row">
  <div class="col-3">…</div> <!– 25% –>
  <div class="col-9">…</div> <!– 75% –>
</div>

row এর ভেতরের সব কলামের floating property লেফ্ট করা হয়েছে। কাজেই এদের পরের ইলামেন্টগুলোও বামপাশ থেকে উপস্থাপিত হতে চাইবে। এই সমস্যা দূর করার জন্য clear property ব্যবহার করতে হবে।

CSS:

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

আরেকটু দৃষ্টিনন্দন করার জন্য কিছু স্টাইল ও রং ব্যবহার করা যেতে পারে:

Code Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.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%;}
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;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">

<div class="col-3 menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="col-9">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।