演習課題「グリッドトラックのサイズをフレキシブルに変更しよう」
現在、ブラウザでは、グリットCとグリッドFの右側に余白が生じています。
ここで、grid-template-columnsプロパティの値の一部をfr単位に変更し、グリッドトラックのサイズをグリッドコンテナの大きさに合わせて変更してください。
ただし、グリッドレイアウトの1列目は300pxのままにし、残りの横幅を2列目と3列目へそれぞれ2:1に分配してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃03:フレキシブルにサイズを合わせる(fr)
このチャプターでは、フレキシブルにサイズを合わせる単位について学習します。
グリッドレイアウトにおいて、グリッドコンテナのサイズに合わせてグリッドトラックのサイズを柔軟に変更したい場合に便利なのが、fr単位です。fr単位を使用すると、グリッドコンテナの全サイズから固定サイズのグリッドアイテムのサイズを差し引いた残りのスペースを、それぞれのfr単位で指定された値の比率に合わせて自動的に分配します。これにより、レスポンシブなレイアウトを簡単に実現できます。
たとえば、グリッドコンテナのサイズが400pxで、グリッドトラックのサイズを2fr 1fr 1frと指定した場合を考えてみましょう。
この場合、400pxの利用可能なスペースが2:1:1の比率で分割され、それぞれのグリッドトラックに以下のサイズが割り振られます。
・1番目のグリッドトラック: 200px
・2番目のグリッドトラック: 100px
・3番目のグリッドトラック: 100px
このように、fr単位を使うことで、グリッドのサイズが変動しても各グリッドトラックが適切に調整され、柔軟なレイアウトを構築できます。
@charset "UTF-8";
.grid_container{
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 100px 1fr 2fr;
width: 1000px;
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 - <flex>
https://developer.mozilla.org/ja/docs/Web/CSS/flex_value