f:id:namikuguri:20180122083518p:plain

2日間 Grid Layout の学習に取り組み、昨日はグリッド領域を個別に指定する方法を確認した。今日はグリッドセルに名前をつけてグリッド領域を指定する方法を調べた。

(Demo) セルに名前をつけて表示領域を指定する | JSFiddle

用語、グリッドセル と グリッド領域 は違うので注意。

グリッドセル
グリッドセルは、グリッド上の最も小さな単位です。

グリッドレイアウトの基本的な概念 | MDN

グリッドセルはグリッドをつくった時点で存在するもので、

グリッド領域
アイテムは、行と列の複数のセルにまたがって配置でき、グリッド領域を作ることができます。

グリッドレイアウトの基本的な概念 | MDN

グリッド領域は開発者が指定するもの。

デモのようにグリッドセルに名前をつけるには grid-template-areas を使う。この名前をつけたセルを grid-area プロパティで指定することで、グリッド領域を決める。

親要素
- grid-template-areas ... グリッドセルに名前をつける
子要素
- grid-area ... 名前のつけたセルを使ってグリッド領域を決める

.grid {
  display: grid;
  grid-template-areas: "header header header"
                       "nav    main   main"
                       "nav    main   main"
                       "footer footer footer";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.grid__header {
  grid-area: header;
  background-color: red;
}

.grid__nav {
  grid-area: nav;
  background-color: blue;
}

.grid__main {
  grid-area: main;
  background-color: yellow;
}

.grid__footer {
  grid-area: footer;
  background-color: green;
}