演習課題「トラックサイズの指定にautoを利用しよう」
現在、ブラウザでは、グリッドAからグリッドFまでのグリッドアイテムが2行3列で表示されています。
ここで、grid-template-columnsプロパティの値にautoを用いて、1列目のグリッドトラックの横幅をコンテンツサイズに合わせたサイズに修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃05:コンテンツに合わせたサイズを指定する(auto)
このチャプターでは、コンテンツに合わせたサイズを指定する値について学習します。
グリッドトラックのサイズを指定する際、pxのような固定値やminmax()関数以外に、autoという便利なキーワードを使うことができます。autoをグリッドトラックのサイズに指定すると、その行や列のサイズはコンテンツのサイズに自動的に合わせて調整されます。具体的には、以下のようになります。
・最大値: その行または列にあるコンテンツの中で最も大きいサイズのコンテンツが、改行などされずにすべて表示できるサイズになります。
・最小値: その行または列にあるコンテンツが持つ最小サイズ（テキストの最も長い単語や、画像などの固有の最小サイズ）のうち最大のサイズを指します。
これにより、グリッド内の要素がはみ出したり、不必要に大きなスペースを取ったりすることなく、コンテンツに最適な表示を実現できます。特に、コンテンツの量が頻繁に変わるような動的なレイアウトにおいて、autoは非常に役立ちます。
@charset "UTF-8";
.grid_container{
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 100px auto 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 - grid-template-rows (auto値に関する記述)
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-rows#auto
MDN web docs - grid-template-columns (auto値に関する記述)
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns#auto