نوار کناری می گوید

این نسخه ی نمایشی از تابع minmax() برای طرح بندی شبکه بهره می برد. در نسخه نمایشی از این تابع برای تنظیم حداقل اندازه نوار کناری روی 100px استفاده می‌شود، اما در صفحه‌های بزرگ‌تر، اجازه می‌دهد تا 25% گسترش یابد. نوار کناری همیشه 25% از فضای افقی والد خود را اشغال می کند تا زمانی که این 25% کوچکتر از 100px شود.

این را با استفاده از ویژگی grid-template-columns با مقدار زیر اضافه کنید: minmax(100px, 25%) 1fr . مورد در ستون اول (نوار کناری در این مورد) minmax 100px در 25% دریافت می کند، و مورد دوم (بخش main در اینجا) بقیه فضا را به عنوان یک تراک 1fr اشغال می کند.

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

HTML

<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;
}