2017-12-26 73 views
5

के साथ पूरी तरह उत्तरदायी आइटम 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

+0

के बारे में स्वत: भरण और स्वतः फ़िट अधिक: https://blog.jonstodle.com/responsive-layout-with-css-grid-part-2-auto- फिट-ऑटो-फिल/ – tobi

+0

चूंकि पृष्ठ पर अन्य तत्व हैं, इसलिए आपकी मीडिया क्वेरी को केवल एक कंटेनर न केवल पूरे लेआउट पर आधारित होना होगा। तो जब पृष्ठ पर * सभी सामग्री * इस कंटेनर को 400px तक निचोड़ती है, तो मीडिया क्वेरी को ट्रिगर करें ... –

+0

अन्यथा, एक स्क्रिप्ट का उपयोग करें जो 'ग्रिड-टेम्पलेट-कॉलम' के मान को स्विच करता है जब यह 400px की चौड़ाई का पता लगाता है बर्तन। –

उत्तर

0

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

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

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

अच्छा विचार, लेकिन यह काम नहीं कर रहा है। मुझे लगता है कि ऐसा इसलिए है क्योंकि टेम्पलेट कॉलम ऑटो-फिट/भरने पर कोई अंतर्निहित रूप से निर्मित ग्रिड कॉलम (ग्रिड-ऑटो-कॉलम) नहीं हैं। मिनीमैक्स के अंदर अधिकतम सामग्री मेरे लिए भी काम नहीं करती है। – tobi

0

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

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