演習課題「グリッドの行や列の数やサイズを変えてみよう」
現在、ブラウザではグリッドアイテムが上から下に並べられています。
ここで、grid-template-rowsプロパティとgrid-template-columnsプロパティを用いて、2行3列のグリッドレイアウトを作成してください。
ただし、1行目から2行目をそれぞれ200px、100pxに、1列目から3列目をそれぞれ300px、200px、100pxに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃02:グリッドの行や列のサイズを指定(grid-template-rows/grid-template-columns)
このチャプターでは、グリッドの行や列のサイズを指定する方法について学習します。
displayプロパティにgridを指定するだけでは、要素は単一列に並んでしまいます。さまざまなレイアウトを実現するには、グリッドの行と列のサイズを定義する必要があります。
グリッドの横方向の行は「グリッドロウ」、縦方向の列は「グリッドカラム」と呼ばれます。これらのサイズを指定するには、以下のCSSプロパティを使います。
・grid-template-rows: グリッドの行のサイズを指定します。
・grid-template-columns: グリッドの列のサイズを指定します。
これらのプロパティには、pxなどの具体的な長さの単位で、各「グリッドトラック」のサイズを指定します。grid-template-rowsプロパティやgrid-template-columnsプロパティに指定する値の数が、そのまま作成されるグリッドトラックの数となります。例えば、grid-template-rowsにN個の値、grid-template-columnsにM個の値を指定すれば、N行M列のグリッドレイアウトが作成できます。
このようにしてグリッドが作成されると、グリッドアイテムは自動的に、左上から順に行に沿ってセルに配置されます。
もしグリッドアイテムの数が定義されたセルの数よりも多い場合、グリッドは自動的に拡張されます。足りない分の新たな行がグリッドの下に追加され、残りのグリッドアイテムが配置されます。
@charset "UTF-8";
.grid_container{
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 100px 200px 300px;
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
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-rows
MDN web docs - grid-template-columns
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns