चौड़ाई भरने के लिए खींचने के लिए आइटम कैसे प्राप्त करें?
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 3px;
border: 1px solid green;
}
.item {
border: 1px solid red;
height: 50px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
मैं कैसे लाल item
बक्से एक छोटा सा खिंचाव कर सकते हैं इतना है कि वे हरे रंग की container
बॉक्स की पूरी चौड़ाई को भरने?
वे सभी एक ही चौड़ाई, और 100px से थोड़ा बड़ा होना चाहिए।
अंतिम पंक्ति को अब के रूप में छोड़ दिया जाना चाहिए।
वहाँ '1fr' और' ऑटो के बीच एक अंतर है इस संदर्भ में टी? ऐसा लगता है जैसे "ऑटो" कॉलम-चौड़ाई असमान बना सकता है लेकिन ऐसा लगता है कि यह मामला नहीं है। – mpen
कॉलम चौड़ाई असमान नहीं हैं क्योंकि प्रत्येक कॉलम के लिए न्यूनतम चौड़ाई 100px पर तय की जाती है, और * आइटम * में कोई सामग्री नहीं है, जो 'ऑटो' का आधार है। –
'1fr' स्तंभों में समान रूप से स्थान वितरित करता है: https://jsfiddle.net/fj3cpwva/ –