【CSS Grid】display:gridとfrの使い方｜2通りの書き方を図とコードで解説

方法①：グリッド線の番号で配置する方法

以下のようなグリッドに要素ＡＢＣを配置することとします。

          150px           残りの幅(1fr ※)
      ┌──────┬──────────────┐1
      │            │                            │
100px │            │            要素Ｂ          │  グリッド線の行番号
      │  要素Ａ    │                            │  (grid-row)
      │            ├──────────────┤2
 50px │            │            要素Ｃ          │
      └──────┴──────────────┘3
       1             2                            3
                    グリッド線の列番号(grid-column))

    ※単位「fr」は比率の事で親要素から見た子要素の大きさをfraction(比率)で指定します
      但し１か所だけ「1fr」指定した場合は残りの幅を意味します。

CSSでは親要素でグリッドの行のサイズ(grid-template-rows)と列のサイズ((grid-template-columns)を定義し
子要素Ａ、子要素Ｂ、子要素Ｃでgrid-row（開始と終了のグリッド線の行番号)と,grid-column(開始と終了のグリッド線の列番号）を指定します。

<style>
/*親要素*/
.grid1{
    display: grid;
    grid-template-rows: 100px 50px;
    /* 単位fr は比率の事で、親要素から見た子要素の大きさをfraction(比率)で指定します */
    /* 「1fr 1fr 1fr」 だと「1:1:1」を示します */
    grid-template-columns: 150px 1fr;
}
/*子要素Ａ*/
.grid1 > .itemA{
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    background: #fcc;
}
/*子要素Ｂ*/
.grid1 > .itemB{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background: #cfc;
}
/*子要素Ｃ*/
.grid1 > .itemC{
    grid-row: 2 / 3;
    grid-column: 2 / 2;
    background: #ccf;
}
</style>
<div class="grid1">
  <div class="itemA">
    要素Ａ
  </div>
  <div class="itemB">
    要素Ｂ
  </div>
  <div class="itemC">
    要素Ｃ
  </div>
</div>

方法②：エリア名を使って配置する方法

以下のようなグリッドに要素Ａ(itemA)、要素Ｂ(itemB)、要素Ｃ(itemC)を配置することとします。

          1fr                1fr
      ┌─────────┬─────────┐
      │                  │                  │
100px │  itemA           │     itemB        │
      │                  │                  │
      ├─────────┼─────────┤
 50px │  itemA           │     itemC        │
      └─────────┴─────────┘

    ※fr は比率の事で、親要素から見た子要素の大きさをfraction(比率)で指定します

CSSでは親要素でグリッドの行のサイズ(grid-template-rows)と列のサイズ((grid-template-columns)と 各グリッドのセルにエリア名(grid-template-areas)を定義し
子要素Ａ、子要素Ｂ、子要素Ｃでエリア名(grid-area)を指定します。

<style>
/*大外の要素*/
.grid2{
    display: grid;
    grid-template-rows: 100px 50px;
    /* 単位fr とは比率の事で、親要素から見た子要素の大きさをfraction(比率)で指定することができます */
    /* 「1fr 1fr 1fr」 だと「1:1:1」を示します */
    grid-template-columns: 1fr 1fr;
    /*グリッドのセルにエリア名を付けます*/
    grid-template-areas:
        "itemA itemB"
        "itemA itemC";
}
/*要素Ａ*/
.grid2 > .itemA{
    grid-area: itemA;
    background: #fcc;
}
/*要素Ｂ*/
.grid2 > .itemB{
    grid-area: itemB;
    background: #cfc;
}
/*要素Ｃ*/
.grid2 > .itemC{
    grid-area: itemC;
    background: #ccf;
}
</style>
<div class="grid2">
  <div class="itemA">
    要素Ａ
  </div>
  <div class="itemB">
    要素Ｂ
  </div>
  <div class="itemC">
    要素Ｃ
  </div>
</div>

単位frについて

単位「fr」は親要素から見た割合で、以下の場合は「１：３」の割合になります。

          1fr           3fr
      ┌──────┬──────────────┐1
      │            │                            │
100px │            │            要素Ｂ          │  グリッド線の行番号
      │  要素Ａ    │                            │  (grid-row)
      │            ├──────────────┤2
 50px │            │            要素Ｃ          │
      └──────┴──────────────┘3
       1             2                            3
                    グリッド線の列番号(grid-column))

    ※単位「fr」は比率の事で親要素から見た子要素の大きさをfraction(比率)で指定します
      但し１か所だけ「1fr」指定した場合は残りの幅を意味します。

<style>
/*大外の要素*/
.grid3{
    display: grid;
    grid-template-rows: 100px 50px;
    /* 単位fr とは比率の事で、親要素から見た子要素の大きさをfraction(比率)で指定することができます */
    /* 「1fr 1fr 1fr」 だと「1:1:1」を示します */
    grid-template-columns: 1fr 3fr;
    width:400px;
    max-width:98%;
    column-gap:12px; /* 水平溝指定 */
    row-gap:6px;     /* 垂直溝指定 */
}
/*要素Ａ*/
.grid3 > .itemA{
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    background: #fcc;
}
/*要素Ｂ*/
.grid3 > .itemB{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background: #cfc;
}
/*要素Ｃ*/
.grid3 > .itemC{
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    background: #ccf;
}
</style>
<div class="grid3">
  <div class="itemA">
    要素Ａ
  </div>
  <div class="itemB">
    要素Ｂ
  </div>
  <div class="itemC">
    要素Ｃ
  </div>
</div>