CSS में सही मार्जिन के साथ टाइल लेआउट

आइए एक टाइल लेआउट बनाएं जो मार्जिन का उपयोग करके स्पेसिंग करते समय बिना किसी समस्या के ठीक से काम करे। मान लीजिए कि शुरुआत में हमारे पास बिना किसी स्पेसिंग के एक टाइल लेआउट है:

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

Результат: