סרגל הצד אומר

בהדגמה הזו אפשר להשתמש בפונקציה 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;
}