Grid Layout のグリッド枠をインラインで表示したい (inline-grid の利用) - CSS

Grid Layout のグリッド枠をインラインで表示するコードを紹介します。

概要

displayプロパティで inline-grid を指定すると、Grid Layoutでグリッドの枠をインラインで表示できます。

書式

コンテナ枠

(セレクタ){
    display: inline-grid;
    grid-template-columns: (1列目の幅) (2列目の幅) ...... (n列目の幅);
    grid-template-rows: (1行目の高さ) (2行目の高さ) ...... (n行目の高さ);
}

グリッドの枠 (アイテム枠)

(セレクタ){
    grid-column: (列方向のグリッドの開始位置) / (列方向のグリッドの終了位置);
    grid-row: (行方向のグリッドの開始位置) / (行方向のグリッドの終了位置);}
}

記述例

グリッドの開始位置、終了位置はグリッドのラインで指定します。
下記コードの場合は、2番目のグリッドの縦ラインから5番目のグリッドの縦ラインまでをセルの横幅としています。

  grid-column: 1 / 5;

コード例

下記のCSSファイルとHTMLファイルを作成します。

SimpleInlineGrid.css

.Container {
  display: inline-grid;
  grid-template-columns: 120px 120px 120px 120px;
  grid-template-rows: 40px 40px;
  border: solid #ff6a00 1px;
}

.GridItem1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: #ff9c9c;
}

.GridItem2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background-color: #ffcb70;
}

.GridItem3 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  background-color: #fffd70;
}

.GridItem4 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
  background-color: #b0ff70;
}

.GridItem5 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background-color: #7ee68d;
}

.GridItem6 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-color: #7ee6e2;
}

.GridItem7 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  background-color: #95a7f5
}

.GridItem8 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
  background-color: #d095f5;
}

SimpleInlineGrid.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleInlineGrid.css" />
</head>
<body>
  <h2>Grid Layout (inline-grid) のデモ</h2>
  <div>
    Grid Layout (inline-grid) のデモです。
    <div class="Container">
      <div class="GridItem1">項目1</div>
      <div class="GridItem2">項目2</div>
      <div class="GridItem3">項目3</div>
      <div class="GridItem4">項目4</div>
      <div class="GridItem5">項目5</div>
      <div class="GridItem6">項目6</div>
      <div class="GridItem7">項目7</div>
      <div class="GridItem8">項目8</div>
    </div>
    Gridここまで。
  </div>
  <p>次の段落です。</p>
</body>
</html>

解説

Grid Layoutの動作についてはこちらの記事を参照してください。

displayプロパティの設定を inline-grid に指定しインラインでグリッドを表示する動作にしています。

.Container {
  display: inline-grid;
  grid-template-columns: 120px 120px 120px 120px;
  grid-template-rows: 40px 40px;
  border: solid #ff6a00 1px;
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。
下図のページが表示されます。「Grid Layout (inline-grid) のデモです。」と「Gridここまで。」の間に開業なしの状態でグリッドの枠が表示されている状態が確認できます。

ウィンドウ幅を狭めた場合は、グリッドの枠は折り返しされず、テキスト部分が折り返し表示になります。

参考:display:grid の場合

上記のコードと同じコードで、displayプロパティを display: grid; に変更した場合の表示結果を確認します。

.Container {
  display: grid;
  grid-template-columns: 120px 120px 120px 120px;
  grid-template-rows: 40px 40px;
  border: solid #ff6a00 1px;
}

上記のページを表示します。下図のページが表示されます。Gridの枠が改行され枠がウィンドウ幅いっぱいに表示されます。ブロック要素の表示になっていることがわかります。

ウィンドウ幅を狭めた場合の表示です。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次