मैं सीएसएस-ग्रिड के साथ एक उत्तरदायी ग्रिड डिजाइन बनाने की कोशिश कर रहा हूँ। मैं ऐसे कॉलम रखना चाहता हूं जो लगभग 400px हैं और 500px तक विस्तारित हो सकते हैं। जब एक ग्रिड सेल अब अपने स्थान पर कब्जा नहीं कर सकता है, तो मैं इसे लपेटना चाहता हूं। अनिवार्य रूप से, छोटे व्यूपोर्ट पर, मुझे बड़े व्यूपोर्ट पर एक का कॉलम चाहिए, मुझे अधिकतम 2 कॉलम चाहिए। क्या मीडिया के प्रश्नों के बिना ऐसा करने का कोई तरीका है? मैं इससे बचने की कोशिश कर रहा हूं क्योंकि मेरे पास एक साइडबार है जो विस्तार कर सकता है जो दृश्य चौड़ाई को नहीं बदलता है।

.grid-wrapper {
  display: grid;
  /* below line DOES NOT WORK */
  grid-template-columns: repeat(minmax(1, 2), minmax(400, 500));
}
1
alferguson_JS 10 सितंबर 2019, 19:45

1 उत्तर

सबसे बढ़िया उत्तर

अधिकतम-चौड़ाई के साथ ग्रिड ऑटो-फिल

आप रिपीट पर मिनिमैक्स और फिर मिनमैक्स को नहीं कर सकते हैं।

दोहराना पहला है कि कितनी बार दोहराना है, और दूसरा क्या दोहराना है।

आपको न्यूनतम चौड़ाई देने के लिए ऑटो-फिल का उपयोग करें।

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

और आप .grid-wrapper उदाहरण के लिए max-width: 1000px; बता सकते हैं

जैसे कि आपके पास ग्रिड को नियंत्रित करने का कोई तरीका है।

मैंने यहां एक संक्षिप्त विवरण दिया है, हालांकि, मुझे आपकी व्याख्या बिल्कुल समझ में नहीं आई - आपकी तालिका कैसी दिखती है।

1
Omer 10 सितंबर 2019, 16:57