LogoMark.png

CSS/GridLayout

CSS|GridLayout


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

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


はじめに

Grid Layout の仕様

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


用語の理解

実装手順

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. アイテムの配置を指定 事例1:ラインの番号で指定する

 #item 
   

例えば、2行x3列(2トラック x 3トラック)のグリッドレイアウトでは、 rowに No.1~No. 3、columnには No.1~ No.4 のラインが存在します。1行目の中央に要素(#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:結合したセルをライン番号で指定

  #item
  

同様の 2行x3列のグリッドレイアウトで、上図のような場所に配置したい場合、#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. アイテムの配置を指定 事例3:エリアに名前を付けて指定

AB
C

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

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

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

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


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

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

写真1コメント1
写真2コメント2
写真3コメント3



事例2 DEMO

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



PAGES

GUIDE

DATA

Last-modified: 2019-07-05 (金) 20:51:11