CSS-এ সঠিক মার্জিন সহ টাইল লেআউট

আসুন একটি টাইল লেআউট তৈরি করি যা margin ব্যবহার করে স্পেসিং সহ সত্যিই সমস্যা ছাড়াই কাজ করে। ধরুন আমাদের কাছে শুরুতে এমন একটি টাইল লেআউট আছে যেখানে কোনো স্পেসিং নেই:

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>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

আসুন margin ব্যবহার করে উপাদানগুলির মধ্যে অনুভূমিক স্পেসিং তৈরি করি।

এর জন্য সব চাইল্ড এলিমেন্টে margin-right-কে 10px-এ সেট করি, এবং প্রতি তৃতীয় চাইল্ড এলিমেন্টের জন্য এই margin-কে শূন্যে সেট করি। এটি করতে nth-child সিউডোক্লাস ব্যবহার করি, এতে এমন একটি প্যারামিটার সেট করে যাতে প্রতি তৃতীয় এলিমেন্ট নির্বাচন হয়।

স্পেসিং-এর জন্য জায়গা করতে প্যারেন্টের প্রস্থও 320px-এ বাড়াই, এবং দেখি আমরা কী পাই:

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>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 1px solid green;
}
.child:nth-child(3n) {
  margin-right: 0;
}

Результат:

তো, সব কাজ করছে। আসুন শেষ এলিমেন্টটি সরিয়ে ফেলি, যাতে শেষ সারিতে কম এলিমেন্ট থাকে এবং নিশ্চিত করি যে এই শেষ সারিতে আমাদের কোনো সমস্যা হচ্ছে না:

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>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border: 1px solid green;
}
.child:nth-child(3n) {
  margin-right: 0;
}

Результат: