演習課題「自動的にグリッドトラックを変化させよう - その1」
現在、ブラウザでは、グリッドアイテムが横一列に並んでいますが、ある一定のウィンドウの画面サイズを下回ると、グリッドコンテナからはみ出して表示されます。
ここで、grid-template-columnsプロパティのrepeat()関数の1つ目の引数の値を変更し、グリッドコンテナのサイズに応じてグリッドトラック数が変化するようにしてください。また、グリッドアイテムを1列に並べたときの横幅よりもグリッドコンテナの横幅が大きい場合には何も表示しない空のトラックを表示するようにしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「自動的にグリッドトラックを変化させよう - その2」
現在、ブラウザでは、グリッドアイテムが横一列に並んでいますが、ある一定のウィンドウの画面サイズを下回ると、グリッドコンテナからはみ出して表示されます。
ここで、grid-template-columnsプロパティのrepeat()関数の1つ目の引数の値を変更し、グリッドコンテナのサイズに応じてグリッドトラック数が変化するようにしてください。また、グリッドアイテムを1列に並べたときの横幅よりもグリッドコンテナの横幅が大きい場合には、それぞれのグリッドアイテムの幅を増加させて表示してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃07:レスポンシブなグリッドを作成する(auto-fit/auto-fill)
このチャプターでは、レスポンシブなグリッドを作成する値について学習します。
repeat()関数の繰り返し回数を指定する部分に、auto-fillまたはauto-fitを使用すると、グリッドコンテナのサイズに応じてグリッドトラックの数を自動的に変化させることができます。これにより、さまざまな画面サイズに柔軟に対応するレスポンシブなグリッドレイアウトを簡単に作成できます。
この2つのキーワードは似ていますが、グリッドコンテナの幅に余裕がある（グリッドアイテムを1列に並べたときの合計幅よりコンテナ幅が大きい）場合の挙動が異なります。
・auto-fillを指定した場合、空白部分に何も表示しない空のトラックが作成され、定義されたトラックのパターンで可能な限り埋めようとします。
・auto-fitを指定した場合、空白部分をなくすために、既存のグリッドアイテムの幅を広げて表示します。
これらのキーワードを使いこなすことで、デバイスのサイズに合わせた柔軟で美しいグリッドレイアウトを効率的に実装できます。
@charset "UTF-8";
.grid_container{
display: grid;
grid-template-rows: 100px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
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;}
@charset "UTF-8";
.grid_container{
display: grid;
grid-template-rows: 100px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
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 - repeat() (auto-fill値に関する記述)
https://developer.mozilla.org/ja/docs/Web/CSS/repeat#auto-fill
MDN web docs - repeat() (auto-fit値に関する記述)
https://developer.mozilla.org/ja/docs/Web/CSS/repeat#auto-fit