सीएसएस ग्रिड और ऑटो-फिट मिनमैक्स

Question

के साथ पूरी तरह उत्तरदायी आइटम grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)) का उपयोग उत्तरदायी सीएसएस ग्रिड बनाने में आसान बनाता है। मीडिया क्वेरी का उपयोग किए बिना कंटेनर एक पंक्ति में फिट होने वाले कई तत्वों से भरा होगा।

.container { 
 
    display: grid; 
 
    grid-gap: 5px; 
 
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background: #ccc; 
 
}

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

समस्या यह है कि आइटम स्क्रीन की तुलना में व्यापक है जब स्क्रीन मिनट-मूल्य minmax() में निर्दिष्ट की तुलना में छोटे है। आप 400px पर मीडिया क्वेरी जोड़ कर इसे ठीक कर सकते हैं, लेकिन यह केवल तब काम करता है जब आप जानते हैं कि कंटेनर के आसपास कोई सामग्री नहीं है। और यह लगभग असंभव है जब कंटेनर कहीं भी रखा जा सकता है।

क्या वस्तुओं को बताने का कोई तरीका या संपत्ति है कि उन्हें 100% से अधिक व्यापक नहीं होना चाहिए?

कुछ ऐसा है: जितना संभव हो सके 400px आइटम के साथ कंटेनर भरें, लेकिन यह सुनिश्चित करें कि उनमें से कोई भी कंटेनर की चौड़ाई से 100% से अधिक न हो।

CodePen Demo

Answer 1

यथासंभव अधिक से अधिक 400 आइटम के साथ कंटेनर भरें, लेकिन है कि गैर सुनिश्चित की उन्हें कंटेनर की चौड़ाई के 100 व्यापक% से हो जाता है।

है कि आप "अधिकतम-सामग्री" संपत्ति का उपयोग कर सकते के लिए, अपने उदाहरण में यह होगा:

.unresponsive { 
    grid-template-columns: repeat(auto-fit, minmax(400px, auto)); 
    grid-auto-columns: max-content; 
} 

Answer 2

आप grid-template-columns: repeat(auto-fit, minmax(min-content, 400px)) क्योंकि minmax काम करता है इस तरह से करने के लिए grid-template-columns बदलना चाहिए: यह अधिकतम लागू करने के लिए कोशिश करता है मूल्य और यदि विफल रहता है तो यह न्यूनतम लागू होता है। लेकिन इसमें आप अपने ग्रिड में दाईं ओर रिक्त स्थान प्राप्त कर सकते हैं। डेमो:

.container { 
 
    display: grid; 
 
    grid-gap: 5px; 
 
    grid-template-columns: repeat(auto-fit, minmax(min-content, 400px)); 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background: #ccc; 
 
}

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