2017-12-19 120 views
6

चौड़ाई भरने के लिए खींचने के लिए आइटम कैसे प्राप्त करें?

.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 से थोड़ा बड़ा होना चाहिए।

अंतिम पंक्ति को अब के रूप में छोड़ दिया जाना चाहिए।

उत्तर

4

आपको अंश इकाईgrid-template-columns नियम में जोड़ने की आवश्यकता है।

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 

यह नियम कंटेनर में फिट होने के रूप में कई कॉलम बनाता है।

प्रत्येक कॉलम की न्यूनतम चौड़ाई 100px है।

अधिकतम चौड़ाई 1fr है, जिसका अर्थ है कि कॉलम पंक्ति पर किसी भी खाली स्थान का उपभोग करेगा।

अब कंटेनर में सभी क्षैतिज स्थान का उपयोग किया जा रहा है।

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
 
    grid-auto-rows: 50px; 
 
    grid-gap: 3px; 
 
    border: 1px solid green; 
 
} 
 

 
.item { 
 
    border: 1px solid red; 
 
}
<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>

कि इन पोस्ट को और अधिक विस्तार से ऊपर समाधान समझा:

+0

वहाँ '1fr' और' ऑटो के बीच एक अंतर है इस संदर्भ में टी? ऐसा लगता है जैसे "ऑटो" कॉलम-चौड़ाई असमान बना सकता है लेकिन ऐसा लगता है कि यह मामला नहीं है। – mpen

+0

कॉलम चौड़ाई असमान नहीं हैं क्योंकि प्रत्येक कॉलम के लिए न्यूनतम चौड़ाई 100px पर तय की जाती है, और * आइटम * में कोई सामग्री नहीं है, जो 'ऑटो' का आधार है। –

+0

'1fr' स्तंभों में समान रूप से स्थान वितरित करता है: https://jsfiddle.net/fj3cpwva/ –

संबंधित मुद्दे