トップへ(mam-mam.net/)

CSSのdisplay:gridの使い方と単位fr(比率) ~グリッドレイアウト

検索:

display:grid;とは

グリッドは、列と行を定義する水平線と垂直線の集合が交差した碁盤の目状のことだそうです。
グリッドレイアウトを使うと要素をグリッド上に指定した行と列で配置することができます。

グリッド線を使って指定する方法

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

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

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

CSSでは親要素でグリッドの行のサイズ(grid-template-rows)と列のサイズ((grid-template-columns)を定義し
子要素A、子要素B、子要素Cで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;
}
/*子要素A*/
.grid1 > .itemA{
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    background: #fcc;
}
/*子要素B*/
.grid1 > .itemB{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background: #cfc;
}
/*子要素C*/
.grid1 > .itemC{
    grid-row: 2 / 3;
    grid-column: 2 / 2;
    background: #ccf;
}
</style>
<div class="grid1">
  <div class="itemA">
    要素A
  </div>
  <div class="itemB">
    要素B
  </div>
  <div class="itemC">
    要素C
  </div>
</div>
要素A
要素B
要素C

エリアに名前を付けて指定する方法

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

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

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

CSSでは親要素でグリッドの行のサイズ(grid-template-rows)と列のサイズ((grid-template-columns)と 各グリッドのセルにエリア名(grid-template-areas)を定義し
子要素A、子要素B、子要素Cでエリア名(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";
}
/*要素A*/
.grid2 > .itemA{
    grid-area: areaA;
    background: #fcc;
}
/*要素B*/
.grid2 > .itemB{
    grid-area: areaB;
    background: #cfc;
}
/*要素C*/
.grid2 > .itemC{
    grid-area: areaC;
    background: #ccf;
}
</style>
要素A
要素B
要素C

単位frについて

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

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

    ※単位「fr」は比率の事で親要素から見た子要素の大きさをfraction(比率)で指定します
      但し1か所だけ「1fr」指定した場合は残りの幅を意味します。
要素A
要素B
要素C
<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;     /* 垂直溝指定 */
}
/*要素A*/
.grid3 > .itemA{
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    background: #fcc;
}
/*要素B*/
.grid3 > .itemB{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background: #cfc;
}
/*要素C*/
.grid3 > .itemC{
    grid-row: 2 / 3;
    grid-column: 2 / 2;
    background: #ccf;
}
</style>
<div class="grid3">
  <div class="itemA">
    要素A
  </div>
  <div class="itemB">
    要素B
  </div>
  <div class="itemC">
    要素C
  </div>
</div>