演習課題「トラックサイズの最小値と最大値を指定しよう」
現在、ブラウザでは、ウィンドウ画面の横幅を小さくすると、2列目のグリッドアイテムの横幅がテキストが改行して表示されるほど狭くなります。
また、grid-template-columnsプロパティの値には100px 2fr 5frが指定されています。
ここで、2列目のグリッドアイテムの横幅を最大値は現在の2frのまま、最小値が150pxになるように修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「minmax()関数の制約を確認しよう-その1」
style01.cssのgrid-containerクラスには、grid-template-columnsプロパティが設定されています。
現在、minmax()関数の最大値が最小値よりも小さくなっているため、ブラウザの横幅を変更しても、2列目のグリッドアイテムの横幅が変わりません。
ここで、minmax()関数の最大値を200pxに修正し、ウィンドウの横幅に合わせて2列目のグリッドアイテムの横幅が変化するように修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「minmax()関数の制約を確認しよう-その2」
現在、style01.cssのgrid-containerクラスには、grid-template-columnsプロパティが設定されています。
しかし、minmax()関数の最小値がfr単位で指定されているため、grid-template-columnsプロパティ全体の値が無効になり、その結果、ブラウザではグリッドアイテムが縦に並んでいます。
ここで、minmax()関数の最小値を50pxに修正し、grid-template-columnsプロパティが正常に動作するように修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃04:トラックサイズの最小値や最大値を指定(minmax)
このチャプターでは、トラックサイズの最小値や最大値を指定する方法について学習します。
グリッドトラックのサイズの最小値や最大値を指定する方法として、minmax()関数があり、最小値と最大値を指定することで、フレキシブルなサイズにしたグリッドトラックが小さくなりすぎたり、大きくなりすぎたりしないようにするために使用します。minmax()関数は2つの引数を持ち、カンマ区切りで最小値と最大値を順に指定します。minmax()関数において、もし最大値に最小値よりも小さい値を指定した場合、最大値は無視されます。つまり、minmax(min, max)と指定した場合はminとして扱います。
また、最小値をfr単位で指定することはできません。
.grid_container{
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 100px minmax(100px,1fr) 6fr;
outline: dashed 5px greenyellow;
}
.grid_A{background-color:lime;}
.grid_B{background-color:aqua;}
.grid_C{background-color:yellow;}
.grid_D{background-color:fuchsia;}
.grid_E{background-color:blue;}
.grid_F{background-color:red;}
.grid_container{
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 100px minmax(100px,50px) 6fr;
outline: dashed 5px greenyellow;
}
.grid_A{background-color:lime;}
.grid_B{background-color:aqua;}
.grid_C{background-color:yellow;}
.grid_D{background-color:fuchsia;}
.grid_E{background-color:blue;}
.grid_F{background-color:red;}
.grid_container{
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 100px minmax(1fr,50px) 6fr;
outline: dashed 5px greenyellow;
}
.grid_A{background-color:lime;}
.grid_B{background-color:aqua;}
.grid_C{background-color:yellow;}
.grid_D{background-color:fuchsia;}
.grid_E{background-color:blue;}
.grid_F{background-color:red;}
MDN web docs - minmax()
https://developer.mozilla.org/ja/docs/Web/CSS/minmax