CSS/GridLayout

CSS｜GridLayout

CSS Grid Layout（グリッドレイアウト）は、格子状の配置・結合が簡単に実装できる CSS3 の仕様です。新しい仕様であるため(2018現在)、ブラウザ環境が少しでも古いと対応しない可能性がありますが、今後一般化することは確実なので、ざっくりご確認下さい。

ブラウザの対応状況：https://caniuse.com/#search=Grid%20Layout

はじめに

Grid Layout の仕様

親要素（コンテナ）に display: grid; と書くだけで、子要素はグリッドに従うアイテムとして配置されます。例えば以下のように書くと、#container の中にある３つの要素が、1：3：1 の比率で配置されます。

• HTML

  <div id="container">
    <nav>メニュー</nav>
    <article>記事</article>
    <aside>サイドバー</aside>
  </div>

• CSS

  #container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 3fr 1fr;
  }

用語の理解

• コンテナ
  グリッド全体を囲む要素です。以下の指定で コンテナ になります。

  display: grid; または display: inline-grid;

• アイテム
  コンテナの子要素。コンテナの直接の子要素はすべてアイテム扱いです。

• トラック
  グリッドの行および列（ラインとラインの間）

• ライン
  グリッドを分ける垂直および水平の線。グリッドの上下左右それぞれの両端にも存在し、上または左から順に番号（1,2,3）が振られています。また下または右からは負の番号（ -1, -2, -3 ）が振られています。

• セル
  文字通りグリッドの最小単位

• エリア
  複数のセル結合（エリアは命名可能、アイテムを配置できます。
  
  
  
  

実装手順

1. コンテナ要素に display:grid; を指定

#container {
   display: grid;
}

2. コンテナ内で各トラックの大きさを指定

・grid-template-rows: 行のトラック高を半角スペースで区切って指定
・grid-template-columns: 列のトラック幅を半角スペースで区切って指定

#container {
   display: grid;
   grid-template-rows: 100px 200px;
   grid-template-columns: 1fr 3fr 1fr;
}

3-1. アイテムの配置を指定　事例１：ラインの番号で指定する

例えば、2行ｘ3列（2トラック x 3トラック）のグリッドレイアウトでは、 rowに No.1～No. 3、columnには No.1～ No.4 のラインが存在します。１行目の中央に要素（#item）を配置したい場合、#item は、行のライン番号 1～2の間、列のライン番号 2～3 の間に存在する という意味で、以下のように記述します。

#item {
   grid-row: 1 / 2;
   grid-column: 2 / 3;
}

要素がセル相当の場合は、スラッシュの後ろは省略できます。

#item {
   grid-row: 1;
   grid-column: 2;
}

3-2. アイテムの配置を指定　事例２：結合したセルをライン番号で指定

同様の 2行ｘ3列のグリッドレイアウトで、上図のような場所に配置したい場合、#item は、行に関して 1～3、列に関して 3～4 を占有しているので、当該アイテムに対して以下のように記述します。

#item {
   grid-row: 1 / 3;
   grid-column: 3 / 4;
}

右（下）のラインの番号の代わりに、結合する数を記述する方法もあります。
その場合スラッシュのあとに / span 結合数 を記述します。

#item {
   grid-row: 1 / span 2;
   grid-column: 3 / span 1;
}

3-3. アイテムの配置を指定　事例３：エリアに名前を付けて指定

非常に直感的に見える方法です。以下のプロパティーを使います。

• grid-template-areas：エリアを作ってそれぞれに名前を付ける
  　＞ コンテナのスタイルとして記述
• grid-area：当該アイテム が使うエリアの名前を指定する
  　＞ アイテムのスタイルとして記述
  上図のような構成にしたい場合、CSSは見たままのかたちで名前をつけます。

  #container {
      grid-template-areas:
          "AreaA AreaB"
          "AreaA AreaC";
  }

  ダブルクォーテーションで囲まれた1行が、グリッドの1行を意味し、含まれる文字列（AreaA、AreaB など半角スペース区切）がエリアの名前です。同じエリア名を指定することで、複数のセルを結合できます。
  あとは、アイテムに grid-area を記述すればOKです。

  #itemA {
     grid-area: areaA;
  }

  
  

3-4. アイテムの配置を指定　事例４：エリアに名前を付けて指定

上の事例の展開バージョンです。 grid-template-areasの記述では、視覚的な調整のための半角スペースの利用が可能です。命名の必要のないセルにはピリオドを一つ以上連続して記述することで、直感的な指示が可能です。

#container {
   grid-template-areas:
       " header  header  header "
       " nav    contents   aside  "
       " .....  footer   .....  ";
}

その他、仕様の詳細については以下を参照ください。

• CSS グリッドレイアウト（MDN）
• グリッドレイアウトの基本概念（MDN）
  
  
  
  

事例１　写真とコメントをセットで並べる

• index.html

  <div id="container">
     <div id="p1"><img src="sample01.jpg"></div>
     <div id="c1">コメント１</div>
     <div id="p2"><img src="sample02.jpg"></div>
     <div id="c2">コメント２</p></div>
  </div>

• style.css

  #container {
     display: grid;
     grid-template-columns: 500px 300px
  }
  #p1 { grid-row: 1; grid-column: 1; }
  #c1 { grid-row: 1; grid-column: 2; }
  #p2 { grid-row: 2; grid-column: 1; }
  #c2 { grid-row: 2; grid-column: 2; }

事例２

ページレイアウト全体に GridLayoutを適用した例

• DEMO：https://koichi-inoue.github.io/GridLayout01/
• CODE：https://github.com/koichi-inoue/GridLayout01/