演習課題「repeat()関数を使ってみよう」
現在、grid-template-columnsプロパティの値が同じパターンを繰り返しており、コードが冗長になっています。
ここで、grid-template-columnsプロパティの値にrepeat()関数を適用し、グリッドトラックの横幅が左側から150px、100px、50pxと2回繰り返されるように設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃06:同じパターンを連続して指定する(repeat)
このチャプターでは、同じパターンを連続して指定する方法について学習します。
repeat()関数は、グリッドレイアウトで同じ行や列のサイズパターンを繰り返し指定する際に役立つCSS関数です。これを活用することで、コードを簡潔に記述し、可読性を高めることができます。repeat()関数は、カンマで区切られた以下の2つの引数を取ります。
・繰り返す回数: 指定したサイズパターンを何回繰り返すかを数値で定義します。
・設定: 繰り返したいグリッドトラックのサイズパターンを指定します。
例えば、repeat(4, 50px 100px)と書くと、50px 100px 50px 100px 50px 100px 50px 100pxと同じ意味になります。これにより、記述量を大幅に減らし、グリッドの定義をより効率的に行えます。
@charset "UTF-8";
.grid_container{
display: grid;
grid-template-rows: 100px;
grid-template-columns: repeat(3, 100px 200px);
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()
https://developer.mozilla.org/ja/docs/Web/CSS/repeat