2017-11-21 27 views
6

मैं लचीली कॉलम के साथ एक वेब पेज लेआउट बनाना चाहता हूं जो कि अधिकतम चौड़ाई से जुड़ा हो सकता है। उदाहरण के लिए एक साइडबार मेनू जो उपलब्ध क्षैतिज स्थान का 30% लेता है लेकिन 200px से अधिक नहीं बढ़ना चाहिए।प्रतिशत CSS3 ग्रिड कॉलम की चौड़ाई को कैसे सीमित करें?

सीएसएस flexbox साथ

, मैं इस तरह के समाधान के साथ जाना होगा:

.flexbox-layout { 
 
    display: flex; 
 
} 
 
.flexbox-sidebar { 
 
    flex: 1 1 30%; 
 
    max-width: 200px; 
 
    background-color: lightblue; 
 
} 
 
.flexbox-content { 
 
    flex: 1 1 70%; 
 
    background-color: lightgreen; 
 
}
<p>Layout based on CSS flexbox:</p> 
 
<div class="flexbox-layout"> 
 
    <div class="flexbox-sidebar"> 
 
    <ol> 
 
     <li>Menu item 1</li> 
 
     <li>Menu item 2</li> 
 
     <li>Menu item 3</li> 
 
    </ol> 
 
    </div> 
 
    <div class="flexbox-content"> 
 
    <p>Content</p> 
 
    </div> 
 
</div>

यह स्पष्ट रूप से एक न्यूनतम उदाहरण है - वास्तविक लेआउट कहीं अधिक जटिल हो सकता है और मैं चाहता हूँ सीएसएस ग्रिड फीचर्स जैसे कॉलम/पंक्ति स्पैनिंग और ऑटो कॉलम का लाभ उठाने के लिए, प्रतिक्रिया के लिए मीडिया प्रश्नों के साथ संयुक्त। अब तक, मैं सीएसएस ग्रिड साथ ऊपर flexbox नमूना का एक ही प्रभाव को प्राप्त करने का प्रबंधन नहीं किया:

.grid-layout { 
 
    display: grid; 
 
    grid-template-columns: 30% 70%; /* Max. width for 1st column? */ 
 
    grid-template-rows: auto; 
 
} 
 
.grid-sidebar { 
 
    background-color: lightblue; 
 
} 
 
.grid-content { 
 
    background-color: lightgreen; 
 
}
<p>Layout based on CSS grid:</p> 
 
<div class="grid-layout"> 
 
    <div class="grid-sidebar"> 
 
    <ol> 
 
     <li>Menu item 1</li> 
 
     <li>Menu item 2</li> 
 
     <li>Menu item 3</li> 
 
    </ol> 
 
    </div> 
 
    <div class="grid-content"> 
 
    <p>Content</p> 
 
    </div> 
 
</div>

निम्न मौजूदा सवालों का खिताब होनहार लग रहा था, लेकिन में अंत का पता अन्य समस्याओं:

Can't use max-width to limit content width in css grid column

How to set the maximum width of a column in CSS Grid Layout?

minmax(...) सीएसएस ग्रिड का कार्य या तो मदद नहीं कर रहा है क्योंकि यह अपेक्षाकृत कॉलम चौड़ाई के लिए खाता नहीं है - कम से कम जहां तक ​​मैंने कोशिश की थी।

क्या सीएसएस ग्रिड के साथ ऐसा करने का कोई तरीका है?

+0

आपको कंटेनर को 'ग्रिड-टेम्पलेट-क्षेत्रों में सेट करने की आवश्यकता हो सकती है: 30% 70% '। फिर ग्रिड आइटम पर 'अधिकतम-चौड़ाई: 200px' सेट करें। दुर्भाग्यवश, ग्रिड एक क्लीनर विधि प्रदान करने के लिए प्रतीत नहीं होता है।इस मामले में 'minmax()' फ़ंक्शन बेकार है क्योंकि * अधिकतम * को * मिनट * से कम होने पर अनदेखा किया जाता है, ऐसे मामलों में * न्यूनतम * की गणना। –

+0

मैंने यह भी कोशिश की - दुर्भाग्यवश, यह पूरी तरह से काम नहीं करता है क्योंकि ग्रिड कॉलम स्वयं भी बढ़ता जा रहा है और निम्न कॉलम और इसकी सामग्री (मेरे स्निपेट में हरा क्षेत्र) को दाईं ओर आगे बढ़ाता है। – Gyro

+0

आह, हाँ। यह समझ आता है। फिर कंटेनर में 'ऑटो' पर पहला कॉलम सेट करने और आइटम पर न्यूनतम और अधिकतम लंबाई दोनों को परिभाषित करने के बारे में क्या? (और, बीटीडब्ल्यू, मुझे लगता है कि दूसरा कॉलम कंटेनर पर '1fr' हो सकता है।) –

उत्तर

2

एक हैक की तरह एक सा Feels, लेकिन आप के साथ इस लक्ष्य को हासिल कर सकते हैं:

grid-template-columns: auto minmax(calc(100% - 200px), 70%);


स्पष्टीकरण (https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax)

'minmax (न्यूनतम, अधिकतम) '
न्यूनतम आकार के बराबर या उसके बराबर आकार सीमा निर्धारित करता है और से अधिक के बराबर है। यदि अधिकतम < मिनट, तो अधिकतम को अनदेखा किया जाता है और न्यूनतम (न्यूनतम, अधिकतम) न्यूनतम के रूप में माना जाता है। अधिकतम के रूप में, एक मान ट्रैक के फ्लेक्स कारक सेट करता है; यह न्यूनतम के रूप में अमान्य है।

इसका मतलब है कि ब्राउज़र पहले 30% - 70% मूल्यों को लागू करने का प्रयास करेगा। यदि 100% - 200px की गणना बड़ी है तो पूरी चौड़ाई का 70% यह बढ़ता रहता है, जिससे पहला कॉलम 200px की जगह ले लेता है।

+1

धन्यवाद! थोड़ी सी चिमटा के साथ, आपका कोड स्निपेट से मेरे विशिष्ट 2-कॉलम-लेआउट के लिए काम करता प्रतीत होता है: 'ग्रिड-टेम्पलेट-कॉलम: मिनमैक्स (0, 30%) मिनमैक्स (कैल्क (100% - 200 पीएक्स), 70%) ; अब यह फ्लेक्सबॉक्स संस्करण की तरह व्यवहार करता है। मैं आपके समाधान को अधिकतम चौड़ाई वाले ग्रिड कॉलम की मनमानी संख्या में अनुकूलित करने की कोशिश करूंगा और फिर रिपोर्ट करूंगा। – Gyro

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