このデモでは、グリッド レイアウトに 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;
}