सीएसएस ग्रिड लेआउट में कॉलम की अधिकतम चौड़ाई कैसे सेट करें?

Question

क्या मैं हासिल करना चाहते हैं:

CSS Grid Layout का उपयोग करना, एक अधिकार स्तम्भ जो आकार अपनी सामग्री से ली गई है के साथ एक पृष्ठ के लिए, लेकिन केवल खिड़की चौड़ाई का 20% तक।

मैं कैसे सोचा था कि यह काम करेगा:

div { 
 
    border-style: solid; 
 
} 
 

 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr minmax(auto, 20%); 
 
}

<div id="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin 
 
    </div> 
 
</div>

यह अच्छा लग रहा है, लेकिन फिर जब मैं दूसरे div की सामग्री हटा दें, बाएँ स्तंभ ढह नहीं करता है:

div { 
 
    border-style: solid; 
 
} 
 

 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr minmax(auto, 20%); 
 
}

<div id="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div></div> 
 
</div>

मेरा प्रश्न:

मैं यह धारणा थी कि न्यूनतम करने के बाद से minmax()

(...) एक आकार सीमा बराबर या उससे अधिक परिभाषित करता है और कम से कम या बराबर अधिकतम।

इसका मतलब होगा मेरे मामले में चौड़ाई auto से सेट किया गया है (= 0 जब div खाली है) 20% करने के लिए। हालांकि यह 20% पर रहता है। ऐसा क्यों है?

Answer 1

आप minmax समारोह को गलत समझा गया है। यह पहले अधिकतम मूल्य लागू करने का प्रयास करता है और जब यह संभव नहीं होता है तो यह न्यूनतम लागू होता है।

तो तुम लेआउट तुम सिर्फ अपने कंटेनर चौड़ाई के 20% गणना करने के लिए और फिर आप ग्रिड आइटम के लिए max-width संपत्ति का उपयोग कर इसे लागू करते हैं और दूसरे स्तंभ के लिए अपने grid-template-columns संपत्ति परिभाषा auto का उपयोग की जरूरत है ठीक करने के लिए। डेमो:

div { 
 
    outline: 1px dotted gray; 
 
} 
 

 
.container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto; 
 
} 
 

 
.container > :nth-child(2) { 
 
    max-width: 60px; /* 20% x 300px */ 
 
}

<div class="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div> 
 
    some content 
 
    </div> 
 
    <div></div> 
 
</div>

Answer 2

आपको कंटेनर पर max-width सेट करने की आवश्यकता हो सकती है और इसके कॉलम को auto पर सेट करने दें।

div, 
 
aside { 
 
    border-style: solid; 
 
} 
 

 
#container { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: grid; 
 
    grid-template-columns: 1fr auto; 
 
} 
 

 
aside { 
 
    max-width: 60px; /* 60px is 20% of 300px*/ 
 
    /* max-width:20%; 20% of window's */ 
 
    font-size: 0; 
 
    transition: 0.25s; 
 
} 
 

 
#container:hover aside { 
 
    font-size: 1em; 
 
}

<div id="container"> 
 
    <div> 
 
    Hover it to see aside grow till 20% average width 
 
    </div> 
 
    <aside>lets give a try to resize it from content</aside> 
 
</div>