グリッドレイアウトで内部の枠の幅を比率で指定する

概要

グリッドレイアウトで2段組みや3段組みの枠を作成したい場合があり、それぞれの枠を全体の枠の幅の比率で指定したい場合があります。
グリッドレイアウトで内部の枠の幅を比率で指定する方法として、grid-template-columns プロパティを利用し fr 単位で指定する方法があります。

書式

以下の書式を利用します。

grid-template-columns: [n1]fr [n2]fr ... [nn]fr;

記述例

以下の記述では 1:1 の2段組みの枠を表現します。

grid-template-columns: 1fr 1fr;

以下の記述では 1:4:1 の2段組みの枠を表現します。

grid-template-columns: 1fr 4fr 1fr;

実装例

以下のHTML, CSS ファイルを作成します。

GridPercentage.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="GridPercentage.css" />
</head>
<body>
  <h1>グリッドレイアウト 比率指定</h1>

  <div class="ContentsFrame">
    <div class="Frame1">
      コンテンツ1です。<br />
      ABCDE<br />
      12345<br/>
      αβγδε<br/>
    </div>
    <div class="Frame2">
      コンテンツ2です。<br />
      ABCDE<br />
      12345<br />
      αβγδε<br />
    </div>
    <div class="Frame3">
      コンテンツ3です。<br />
      ABCDE<br />
      12345<br />
      αβγδε<br />
    </div>
  </div>

</body>
</html>

GridPercentage.css

.ContentsFrame {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

.Frame1 {
  background-color:#ffa9a9;
}

.Frame2 {
  background-color: #b6d6ed;
}

.Frame3 {
  background-color: #cae48b;
}

解説

以下の記述で、ContentsFrame クラスの枠をグリッドレイアウトに設定します。 grid-template-columnsプロパティに1fr 3fr 1frを設定しています。1:3:1の幅で内部の枠を表示します。

.ContentsFrame {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。
下図のページが表示されます。左から 1:3:1 の幅で枠が表示されました。
グリッドレイアウトで内部の枠の幅を比率で指定する:画像1

ウィンドウの境界をドラッグしてウィンドウ幅を狭めます。ウィンドウの幅に応じて全体の幅も狭くなりますが、1:3:1も比率は変化しません。
グリッドレイアウトで内部の枠の幅を比率で指定する:画像2
グリッドレイアウトで内部の枠の幅を比率で指定する:画像3