প্রতিক্রিয়ামূলক ওয়েবসাইট ডিজাইন - গ্রিড ভিউ

গ্রিড ভিউ কি?

অনেক ওয়েবসাইট গ্রিড ভিউ (grid-view) ভিত্তিক, এর মানে পৃষ্ঠা কিছু সারিতে বিভক্ত হয়েছে:

ওয়েবসাইট ডিজাইন করার সময়, গ্রিড ভিউরা ব্যবহার করা খুবই সাহায্যক। এরফলে, পৃষ্ঠায় উপাদানগুলোকে সহজেই স্থাপন করা যাবে。

প্রতিক্রিয়ামূলক গ্রিড ভিউরা সাধারণত ১২টি সারিতে বিভক্ত হয়, মোট প্রস্থ ১০০% এবং ব্রাউজার উইন্ডোর মাপ পরিবর্তনের সময় সামনে আটকে ও সমস্ত করে সামনে আটকে হবে。

প্রতিক্রিয়ামূলক গ্রিড ভিউ বানানো

আমরা প্রতিক্রিয়ামূলক গ্রিড ভিউ বানানো শুরু করি।

প্রথমে, সমস্ত HTML উপাদানের box-sizing প্রক্রিয়াটি সংজ্ঞায়িত হয় border-boxএরফলে, উপাদানের মোট প্রস্থ ও উচ্চতাতে প্রান্তসীমা (ফুলস্পেস) ও ঘিরে থাকা কাটা (বর্ডার) যুক্ত হবে。

CSS-তে নিম্নলিখিত কোডটি যোগ করুন:

* {
  box-sizing: border-box;
}

আমাদের CSS বক্স সাইজিং একটি চপ্তির মধ্যে box-sizing প্রক্রিয়ার বিষয়ে আরও বেশি জানুন。

এই উদাহরণটি একটি সাধারণ প্রতিক্রিয়ামূলক ওয়েবসাইটকে দেখায় যার মধ্যে দুটি সারিমূলক রয়েছে:

25%
75%

প্রদত্ত

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

স্বয়ং প্রয়াস করুন

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

কিন্তু, আমরা 12টি বিভাগের প্রতিক্রিয় গ্রিড ভিউ ব্যবহার করতে চাই, যাতে আমরা ওয়েবসাইটটি ভালোভাবে নিয়ন্ত্রণ করতে পারি。

প্রথমে, আমরা একটি বিভাগের প্রতিশত গণনা করতে হবে: 100% / 12 বিভাগ = 8.33%;

তারপর, আমরা 12টি বিভাগের প্রত্যেকটিতে একটি শ্রেণী তৈরি করবো, অর্থাৎ, class="col-" এবং একটি সংখ্যা, যা এই সেকশনটি অতিক্রম করা বিভাগগুলির সংখ্যা নির্দেশ করে:

CSS:

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

স্বয়ং প্রয়াস করুন

এই সমস্ত বিভাগগুলি ডানদিকে ফ্লোট করবে এবং 15px ইনার প্যাডিং হবে:

CSS:

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

প্রত্যেক সারিতে একটি ডিভ এর ভেতরে আবদ্ধ হতে হবে, <div> এখানে।সমস্ত বিভাগগুলির সংখ্যা সর্বদা 12 হতে হবে:

HTML:

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

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

CSS:

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

স্বয়ং প্রয়াস করুন

মনে রাখুন যে, আপনি ব্রাউজার উইন্ডোর চেইসারি খুব কম প্রস্থ করে ফিরে যাওয়ার সময়, উদাহরণস্বরূপ, ওয়েবপেজ সুন্দরভাবে দেখানো হয় না।পরবর্তী চাপে, আপনি এই সমস্যা কিভাবে সমাধান করতে শিখবেন。