این نسخه ی نمایشی از تابع 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;
}