CSS-এ অভিযোজিত টাইলস بدون মার্জিন

আসুন একটি টাইল তৈরি করি যার স্ক্রিনের প্রস্থের উপর নির্ভর করে প্রতি সারিতে বিভিন্ন সংখ্যক ব্লক থাকবে। এখানে একটি উদাহরণ দেওয়া হলো যা আমাদের পাওয়া উচিত:

প্রথমে HTML কোড লিখি:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">12</div>
</div>

এখন ব্লকগুলির প্যারেন্টে স্টাইল যোগ করি:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 50px auto;
}

এখন ব্লকগুলিকেই স্টাইল দেই, তাদের প্রস্থ নির্ধারণ না করে:

css.child {
  box-sizing: border-box;
  height: 100px;
  padding: 20px;
  border: 1px solid green;
}

এটা স্পষ্ট যে ব্লকগুলির প্রস্থ শতাংশে হওয়া উচিত, যাতে স্ক্রিন পরিবর্তন হলে ব্লকগুলি তাদের প্রস্থ মসৃণভাবে পরিবর্তন করতে পারে। একই সময়ে, নির্দিষ্ট স্ক্রিনের আকারে আমাদের ব্লকগুলির প্রস্থ পরিবর্তন করা উচিত, যাতে প্রতি সারিতে একটি নির্দিষ্ট সংখ্যক ব্লক ফিট হয়।

আসুন একটি কোড লিখি যা চারটি ব্লককে এক সারিতে রাখবে:

css@media (min-width: 1000px) {
  .child {
    width: 25%;
  }
}

এবং এখন তিনটি ব্লককে এক সারিতে রাখি:

css@media (min-width: 700px) and (max-width: 1000px) {
  .child {
    width: 33.3333%;
  }
}

এবং এখন দুটি ব্লককে এক সারিতে রাখি:

css@media (min-width: 400px) and (max-width: 700px) {
  .child {
    width: 50%;
  }
}

একটি ব্লক প্রতি সারি:

css@media (max-width: 400px) {
  .child {
    width: 100%;
  }
}

আসুন সমস্ত কোড একত্রিত করি:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 50px auto;
}
.child {
  box-sizing: border-box;
  height: 100px;
  padding: 20px;
  border: 1px solid green;
}

@media (max-width: 400px) {
  .child {
    width: 100%;
  }
}
@media (min-width: 400px) and (max-width: 700px) {
  .child {
    width: 50%;
  }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .child {
    width: 33.3333%;
  }
}
@media (min-width: 1000px) {
  .child {
    width: 25%;
  }
}