يعرض الشريط الجانبي

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