يستفيد هذا العرض التوضيحي من الدالة 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;
}