Sidebar says

This demo takes advantage of the minmax() function for grid layouts. In the demo this function is used to set the minimum sidebar size to 100px, but on larger screens, letting that stretch out to 25%. The sidebar will always take up 25% of its parent's horizontal space until that 25% becomes smaller than 100px.

Add this by using the grid-template-columns property with the following value: minmax(100px, 25%) 1fr. The item in the first column (the sidebar in this case) gets a minmax of 100px at 25%, and the second item (the main section here) takes up the rest of the space as a single 1fr track.

.parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}

<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>

        .parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}