サイドバーの内容

このデモでは、グリッド レイアウトに minmax() 関数を利用しています。デモでは、この関数を使用してサイドバーの最小サイズを 100px に設定していますが、大画面の場合は 25% まで広げることができます。サイドバーは、25% が 100px より小さくなるまで、親の水平方向のスペースの 25% を占有します。

これを追加するには、minmax(100px, 25%) 1fr の値を指定した grid-template-columns プロパティを使用します。最初の列（この場合はサイドバー）のアイテムは 25% で 100px の minmax を獲得し、2 番目のアイテム（ここでは 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;
}