แถบด้านข้างระบุว่า

การสาธิตนี้ใช้ประโยชน์จากฟังก์ชัน 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;
}