साइडबार में कहा गया है

इस डेमो में ग्रिड लेआउट के लिए minmax() फ़ंक्शन का इस्तेमाल किया जाता है. डेमो में, इस फ़ंक्शन का इस्तेमाल साइडबार के कम से कम साइज़ को 100px पर सेट करने के लिए किया गया है. हालांकि, बड़ी स्क्रीन पर, इसे 25% तक सेट किया गया है. साइडबार हमेशा अपने पैरंट के हॉरिज़ॉन्टल स्पेस का 25% इस्तेमाल करेगा. ऐसा तब तक होगा, जब तक 25%, 100px से छोटा नहीं हो जाता.

इस वैल्यू के साथ grid-template-columns प्रॉपर्टी का इस्तेमाल करके, इसे जोड़ें: minmax(100px, 25%) 1fr. पहले कॉलम (इस मामले में साइडबार) के आइटम को 25% पर 100px का minmax मिलता है और दूसरे आइटम (यहां main सेक्शन), बाकी बचे हिस्से को एक 1fr ट्रैक के तौर पर इस्तेमाल करता है.

.parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}

एचटीएमएल

<div class="parent">
    <div class="section yellow" contenteditable>
    Min: 100px / Max: 25%
    </div>
    <div class="section blue" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

CSS

        .parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}